Maison > Article > interface Web > Comment aligner CSS Li horizontalement et au centre

Comment aligner CSS Li horizontalement et au centre

藏色散人original: 2021-02-18 09:57:598087parcourir

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 :

Comment aligner CSS Li horizontalement et au centre

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!

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：Comment utiliser RVB en CSSArticle suivant：Comment utiliser RVB en CSS

Articles Liés

Voir plus