Maison > Article > interface Web > Comment aligner CSS Li horizontalement et au centre
Comment aligner CSS li horizontalement au centre : créez d'abord un exemple de fichier HTML ; puis définissez la balise li ; enfin obtenez un alignement central horizontal grâce à des attributs tels que "overflow: Hidden;margin: 100px auto;".
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3.
Méthode CSS pour obtenir l'effet de centrage horizontal des éléments li multi-colonnes
Partagez un exemple de code, qui obtient l'effet de centrage horizontal des éléments li multi-colonnes.
Le centrage horizontal ici est en fait l'effet d'une répartition uniforme des éléments li.
Les exemples de code sont les suivants :
<!doctype html><html>
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 1180px;
height: auto;
margin: 100px auto;
border: 1px solid #f00;
overflow: hidden;
}
.main ul {
width: 1120px;
list-style: none;
margin: 0 auto;
}
.main ul li {
width: 100px;
height: 100px;
margin-right: 20px;
margin: 20px;
background: #f00;
float: left;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>Rendu :
Le code ci-dessus répond à nos exigences. Présentons-le brièvement ci-dessous le principe de réalisation. .
Définissez la largeur de l'élément ul égale à la largeur de l'élément li plus la valeur de la marge. Supposons que cette valeur soit représentée par w. La largeur de l'élément parent de
ul est w-margin-right (20px), et cet élément parent a l'attribut overflow:hidden, alors les marges excédentaires seront masquées.
Recommandé : "Tutoriel vidéo CSS"
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!