Pourquoi « margin : 0 » ne centre-t-il pas automatiquement mon élément ?

Pourquoi Margin: 0 Auto ne centre pas votre élément

Lorsque vous essayez d'aligner un élément horizontalement à l'aide de la propriété margin: 0 auto, il est crucial de spécifier la largeur de l'élément que vous centrez, et non celle de l'élément parent.

Considérez la situation suivante : vous avez un élément conteneur parent (#header) avec une largeur définie et une liste non ordonnée (

) à l'intérieur. Le
L'élément doit être centré horizontalement dans le #header div en appliquant margin: 0 auto. Cependant, si vous ne spécifiez pas la largeur du champ
élément, il ne sera pas centré dans le conteneur parent.

Pour résoudre ce problème, ajoutez une propriété width à l'élément

élément, par exemple :

#header ul {
  margin: 0 auto;
  width: 90%;
}

Cela attribue une largeur de 90 % à l'élément

élément, le centrant dans le div #header.

CSS mis à jour pour une mise en page améliorée (Modifier) :

#header ul {
  list-style: none;
  margin: 0 auto;
  width: 90%;
}

#header ul li {
  color: #CCCCCC;
  display: inline;
  font-size: 20px;
  padding-right: 20px;
}

Ces styles révisés garantissent que l'élément < ul> l'élément est centré et que ses éléments de liste sont affichés en ligne, supprimant ainsi tous les problèmes causés par l'utilisation de float: left; dans le

et éviter le doublement des marges horizontales dans les anciennes versions d'Internet Explorer.

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!