Maison >interface Web >tutoriel CSS >Comment définir le centre flottant en CSS ?
Comment définir le centre flottant en CSS ?
- 不言original
- 2018-10-30 14:05:2326256parcourir
Dans l'attribut float du CSS, float:right flotte vers la droite et float:left flotte vers la gauche, mais l'attribut centered n'est pas défini Alors que devons-nous faire si nous voulons centrer l'attribut float ? Cet article vous présentera comment centrer l'attribut float en CSS.
Nous utilisons souvent le centrage flottant lors de la création des barres de navigation. Nous allons maintenant utiliser le centrage flottant des barres de navigation pour vous présenter la méthode de centrage flottant en CSS. (Recommandations associées : Comment utiliser l'attribut float en CSS?)
Comment centrer float en CSS : Utilisez display:inline-block et float:left
Regardons l'exemple de code spécifique au centrage du flotteur :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
text-align:center;
}
li {
float:left;
font-size:12px;
}
a {
float:left;
border:1px solid #000;
padding:5px 10px;
text-decoration:none;
color:#000;
}
ul {
display:inline-block;
*display:inline;
zoom:1;
}
</style>
</head>
<body>
<ul>
<li><a href="#nogo">首页</a></li>
<li><a href="#nogo">视频</a></li>
<li><a href="#nogo">文章</a></li>
<li><a href="#nogo">登录</a></li>
<li><a href="#nogo">留言</a></li>
</ul>
</body>
</html>L'effet du centrage du flotteur est le suivant :
Concernant le code ci-dessus, nous verrons un *display:inline;, qui est en fait une méthode d'écriture de hack CSS (si vous ne connaissez pas le hack CSS ; méthode d'écriture, vous pouvez le rechercher vous-même sur Baidu) *{ margin: 0;padding: 0;} est un style de "réinitialisation" courant dans le passé, ce qui signifie que tous les éléments de la page Web sont étroitement liés entre eux parce que différents. les navigateurs produiront différents styles d'éléments par défaut, donc *{ margin: 0; padding: 0;} L'objectif principal est de vous aider à réinitialiser les styles par défaut des différents navigateurs, afin que les résultats des différents navigateurs affichant des pages Web ne soient pas trop différents. .
Après avoir lu les méthodes ci-dessus, vous ne penserez peut-être parfois pas à utiliser le hack CSS pour écrire, et la compatibilité n'est pas bonne
Jetons donc un coup d'œil à la méthode d'implémentation sans utiliser *display. :inline;
Exemple de code montrant comment définir le centrage flottant en CSS (sans utiliser *display:inline;) :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8" />
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.xlk-nav {
width: 100%;
height: 40px;
text-align: center;
background-color: lightblue;
}
.xlk-menu {
height: 100%;
float: left;
line-height: 40px;
padding: 0 20px;
margin-right: 20px;
background-color: pink;
}
</style>
</head>
<body>
<div class="xlk-nav">
<div style="display: inline-block;">
<div class="xlk-menu">首页</div>
<div class="xlk-menu">视频</div>
<div class="xlk-menu">文章</div>
<div class="xlk-menu">登录</div>
<div class="xlk-menu">留言</div>
</div>
</div>
</body>
</html>L'effet de centrage est le suivant :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!