Pourquoi ma « marge : 0 auto » ne centre-t-elle pas mon élément dans un parent de 100 % de largeur ?

Pourquoi centrer un élément avec "margin: 0 auto;" Dans une largeur de 100 %, le parent ne fonctionne pas

Description du problème :

Considérez ce scénario : vous avez un div parent avec une largeur définie sur 100 % et un div non ordonné liste à l'intérieur. Vous avez appliqué « marge : 0 auto ; » à la liste non ordonnée pour la centrer, mais elle refuse de bouger.

Cause du problème :

Le nœud du problème réside dans le fait que vous avez défini la largeur du div parent, pas l'élément que vous essayez de centrer. Pour « marge : 0 auto ; » pour fonctionner efficacement, il faut préciser la largeur de l'élément à centrer.

Solution :

Pour remédier à ce problème, attribuez une largeur à la liste non ordonnée :

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

Considérations supplémentaires :

Pour obtenir un look plus élégant apparence, considérez les améliorations suivantes :

• Supprimez le "float: left;" propriété des éléments "li" car elle entre en conflit avec "display: inline" et crée un doublement involontaire de la marge dans IE6 et les navigateurs antérieurs.
• Appliquez les propriétés de style ci-dessous directement aux éléments "li" :

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

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!