Pourquoi `margin: 0 auto;` ne centre-t-il pas ma liste non ordonnée ?

Pourquoi ne puis-je pas centrer un élément avec une marge : 0 auto ?

Vous essayez de centrer une liste non ordonnée dans un en-tête div utilisant la marge : 0 auto. Cependant, la marge automatique seule est insuffisante pour le centrage. Voici pourquoi :

Comprendre la marge automatique

margin : 0 auto définit les marges gauche et droite sur auto, ce qui entraîne le centrage horizontal de l'élément. Cependant, cela ne fonctionne que si la largeur de l'élément est explicitement définie.

Dans votre code :

#header ul {
  margin: 0 auto;
}

Vous avez défini la largeur du div d'en-tête, mais pas la largeur de la liste non ordonnée. Par conséquent, margin: 0 auto n'a aucun effet sur le centrage de la liste.

Solution :

Pour centrer la liste, vous devez définir explicitement sa largeur :

#header ul {
  margin: 0 auto;
  width: 620px;  // or any desired width
}

Considérations supplémentaires :

Si vous souhaitez centrer horizontalement des éléments tels que répertoriez les éléments dans la liste, définissez la largeur et utilisez display: inline ou float: left. Cependant, notez que les éléments flottants peuvent se comporter de manière imprévisible, il est donc généralement recommandé de les utiliser en ligne.

Par exemple, pour centrer les éléments de la liste :

#header ul li {
  display: inline;
}

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!