recherche

Maison >interface Web >js tutoriel >Comment centrer les éléments flottants horizontalement dans les astuces css_javascript

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

WBOY
WBOYoriginal
2016-05-16 15:46:171422parcourir

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>

2. Partie CSS : 

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

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>

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>

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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery implémente les effets de chargement dynamique de la liste content_jqueryArticle suivant：jQuery implémente les effets de chargement dynamique de la liste content_jquery

Articles Liés

Voir plus