Tipps zum horizontalen Zentrieren schwebender Elemente in css

Tipps zum horizontalen Zentrieren schwebender Elemente in css_javascript

WBOY

Freigeben： 2016-05-16 15:46:17

Original

1370 Leute haben es durchsucht

Für nicht schwebende Elemente mit fester Breite können wir margin:0 auto in CSS verwenden, um sie horizontal zu zentrieren. Für schwebende Elemente mit variabler Breite haben wir auch eine gängige Technik, um das Problem der horizontalen Zentrierung zu lösen. Es gibt viele Möglichkeiten, das Problem der horizontalen Zentrierung zu lösen. Ich hoffe, es kann Ihnen helfen.

Methode 1:

1. HTML-Teil:

<div class="box">
 <p>我是浮动的</p>
 <p>我也是居中的</p>
</div>

Nach dem Login kopieren

2. CSS-Teil:

.box{
 float:left;
 position:relative;
 left:50%;
}
p{
 float:left;
 position:relative;
 right:50%;
}

Nach dem Login kopieren

Es scheint sehr einfach zu sein, oder? Das übergeordnete Element und das untergeordnete Element bewegen sich gleichzeitig nach links, dann bewegt sich das übergeordnete Element um 50 % nach links und dann bewegt sich das untergeordnete Element um 50 % nach links die relative rechte Seite, oder das untergeordnete Element bewegt sich um -50 % nach der relativen linken Seite. So einfach und so magisch.

Methode 2:

HTML-Code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面浮动元素的水平居中</title>
<style type="text/css">
 .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
 .clearfix { zoom:1; }
 .wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }
 .inwrap{ float:left; position:relative; left:50%;}
 .page { float:left; position:relative; left:-50%; }
 .page li { float:left;margin:0 5px; }
 .page li a { display:block; padding:2px 9px; background:white; border:1px solid red; float:left;}
</style>
</head>
<body>
<div class="wrap clearfix">
 <div class="inwrap">
 <ul class="page">
  <li> <a href="#">上一页</a> </li>
  <li> <a href="#">1</a> </li>
  <li> <a href="#">2</a> </li>
  <li> <a href="#">3</a> </li>
  <li> <a href="#">4</a> </li>
  <li> <a href="#">2</a> </li>
  <li> <a href="#">3</a> </li>
  <li> <a href="#">2</a> </li>
  <li> <a href="#">3</a> </li>
  <li> <a href="#">4</a> </li>
  <li> <a href="#">5</a> </li>
  <li> <a href="#">6</a> </li>
  <li> <a href="#">下一页</a> </li>
 </ul>
 </div>
</div>
</body>
</html>

Nach dem Login kopieren

Das übergeordnete Element und das untergeordnete Element verschieben sich gleichzeitig nach links, dann bewegt sich das übergeordnete Element um 50 % nach links und dann bewegt sich das untergeordnete Element um -50 % nach links.

Methode 3:

HTML-Code

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>页面元素的水平居中</title> 
<style type="text/css"> 
 * { margin:0; padding:0; list-style:none; font-size:14px; } 
 .clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; } 
 .clearfix { zoom:1; } 
 a{ text-decoration:none;} 
 h1{ text-align:center; padding:10px; font-size:20px; margin:30px 0;} 
 .wrap { margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; } 
 .inwrap{ float:left; position:relative; left:50%;} 
 .page { float:left; position:relative; left:-50%; } 
 .page li { float:left;margin:0 5px; } 
 .page li a { display:block; padding:2px 9px; background:white; border:1px solid red; float:left;} 
</style> 
</head> 
<body> 
<h1>页面元素的水平居中</h1> 
<h2>浮动方式：</h2> 
<div class="wrap clearfix"> 
 <div class="inwrap"> 
 <ul class="page"> 
  <li> <a href="#">上一页</a> </li> 
  <li> <a href="#">1</a> </li> 
  <li> <a href="#">2</a> </li> 
  <li> <a href="#">3</a> </li> 
  <li> <a href="#">4</a> </li> 
  <li> <a href="#">2</a> </li> 
  <li> <a href="#">3</a> </li> 
  <li> <a href="#">2</a> </li> 
  <li> <a href="#">3</a> </li> 
  <li> <a href="#">4</a> </li> 
  <li> <a href="#">5</a> </li> 
  <li> <a href="#">6</a> </li> 
  <li> <a href="#">下一页</a> </li> 
 </ul> 
 </div> 
</div> 
</body> 
</html>

Nach dem Login kopieren

Hier können Sie auch left:-50% in mehreren Ebenen festlegen, was sinnvoller ist und auch einige unnötige IE-BUGs vermeiden kann. Analog dazu kann diese Methode zum Zentrieren von Float-Elementen tatsächlich auf viele Situationen ausgeweitet werden, in denen Floating-Elemente zentriert werden müssen.

Im Folgenden wird erläutert, wie schwebende Elemente in CSS mithilfe von drei Methoden horizontal zentriert werden. In Zukunft wird diese Website das Wissen über js, jq, css, php, c# und andere Programmieraspekte weiter aktualisieren , Danke.