Heim > Artikel > Web-Frontend > Tipps zum horizontalen Zentrieren schwebender Elemente in css_javascript

Tipps zum horizontalen Zentrieren schwebender Elemente in css_javascript

WBOYOriginal: 2016-05-16 15:46:171371Durchsuche

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>

2. CSS-Teil:

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

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>

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>

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery implementiert dynamische Ladeeffekte von list content_jqueryNächster Artikel：jQuery implementiert dynamische Ladeeffekte von list content_jquery

In Verbindung stehende Artikel

Mehr sehen