Comment centrer les éléments flottants horizontalement dans les astuces css

Comment centrer les éléments flottants horizontalement dans les astuces css_javascript

WBOY

Libérer： 2016-05-16 15:46:17

original

1411 Les gens l'ont consulté

Pour les éléments non flottants de largeur fixe, nous pouvons utiliser margin:0 auto en CSS pour les centrer horizontalement. Pour les éléments flottants de largeurs variables, nous avons également une technique courante pour résoudre le problème de centrage horizontal. Il existe de nombreuses façons de résoudre le problème du centrage horizontal. Partageons avec vous trois méthodes. J'espère que cela pourra vous aider.

Méthode 1 :

1. Partie HTML :

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

Copier après la connexion

2. Partie CSS :

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

Copier après la connexion

Cela semble très simple, n'est-ce pas ? L'élément parent et l'élément enfant flottent vers la gauche en même temps, puis l'élément parent se déplace de 50 % vers la gauche relative, puis l'élément enfant se déplace de 50 % vers la gauche. la droite relative, ou l'élément enfant se déplace de -50 vers la gauche relative, suffit. Si simple et si magique.

Méthode 2 :

Code HTML

<!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>

Copier après la connexion

L'élément parent et l'élément enfant flottent vers la gauche en même temps, puis l'élément parent se déplace de 50 % vers la gauche relative, puis l'élément enfant se déplace de -50 % vers la gauche relative.

Méthode 3 :

code HTML

<!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>

Copier après la connexion

Ici, vous pouvez également définir left: -50% sur plusieurs couches, ce qui est plus raisonnable et peut également éviter certains BUG IE inutiles. Par analogie, cette méthode de centrage des éléments flottants peut en fait être étendue à de nombreuses situations où des éléments flottants doivent être centrés.

Ce qui précède explique comment centrer horizontalement les éléments flottants en CSS via trois méthodes. À l'avenir, ce site Web continuera à mettre à jour les connaissances sur js, jq, css, php, c# et d'autres aspects de la programmation. , merci.