Comment « margin : 0 auto » centre-t-il les éléments et pourquoi cela ne fonctionne-t-il pas toujours ?

Éléments centrés avec marge : 0 Auto expliqué

En CSS, les développeurs rencontrent souvent des difficultés à centrer les éléments en utilisant margin : 0 auto. Pour obtenir un centrage parfait, il est essentiel de comprendre comment fonctionne cette propriété.

Comment fonctionne la marge : 0 auto

marge : 0 auto ajuste automatiquement les marges horizontales d'un élément pour garantir qu’il est centré horizontalement dans son élément conteneur ou sa fenêtre d’affichage. Cette technique repose sur la définition de la largeur de l'élément cible sur une valeur spécifique, généralement exprimée en pourcentage de la largeur de son parent.

Pourquoi il pourrait ne pas être centré

Si margin: 0 auto ne centre pas un élément, cela est généralement dû au fait que la largeur de l'élément cible n'est pas définie. Dans l'exemple de code fourni, le #header div a une largeur de 100 %, mais le #header ul que vous aviez l'intention de centrer n'a pas de largeur définie.

Solution

Pour centrer la liste non ordonnée dans le #header div, vous devez spécifier la largeur du #header ul. Voici une version mise à jour de votre code avec les ajustements nécessaires :

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

En définissant la largeur du #header ul à 90 % de la largeur du parent, nous nous assurons qu'il dispose de suffisamment d'espace pour être centré à l'aide de la marge : 0 automatique. Cela garantira que la liste est centrée horizontalement dans le #header div.

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!