Pourquoi ne puis-je pas centrer avec la marge: 0 auto?

J’ai un div #header qui a 100% width et à l’intérieur de ce div j’ai une liste non ordonnée. J’ai appliqué une margin: 0 auto à la liste non ordonnée, mais elle ne sera pas centrée dans l’en-tête div.

Quelqu’un peut-il s’il vous plaît me dire pourquoi? J’ai pensé que si je définissais la largeur du div parent, la liste non ordonnée devrait pouvoir se centrer avec la margin: 0 auto . Qu’est-ce que je rate?

Voici mon code:

  * { margin: 0; padding: 0; } #header { width: 100%; background-color: #333; min-height: 160px; font-family:Arial, Helvetica, sans-serif; } #sitename { font-size: 50px; width: 620px; margin:0 auto; padding-top: 35px; color:#999; } #header ul { float: right; margin: 0 auto; } #header ul li { float: left; padding-right: 20px; list-style-type: none; font-size: 20px; }       

Vous devez définir la largeur de l’élément que vous centrez, pas l’élément parent.

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

Edit : Ok, j’ai vu la page de test maintenant, et voici comment je pense que vous le voulez:

 #header ul { list-style:none; margin:0 auto; width:90%; } /* Remove the float: left; property, it interferes with display: inline and * causes problems. (float: left; makes the element implicitly a block-level * element. It is still good to use display: inline on it to overcome a bug * in IE6 and below that doubles horizontal margins for floated elements) * The styles below is the full style for the list-items. */ #header ul li { color:#CCCCCC; display:inline; font-size:20px; padding-right:20px; } 

Un bloc en ligne couvre toute la ligne (de gauche à droite), donc une marge à gauche et / ou à droite ne fonctionnera pas ici. Ce dont vous avez besoin est un bloc, un bloc a des bordures à gauche et le droit peut être influencé par des marges.

Voilà comment ça marche pour moi:

 #content { display: block; margin: 0 auto; } 

Pourquoi pas?

 #header { text-align: center; } #header ul { display: inline; } 

Je ne sais pas pourquoi la première réponse est la meilleure, je l’ai essayée et ne fonctionne pas en fait, comme @ kalys.osmonov l’a dit, vous pouvez donner text-align:center à en- header , mais vous devez faire ul comme inline-block plutôt inline , et vous devez également noter que text-align peut être hérité ce qui n’est pas bon dans une certaine mesure, donc la meilleure façon (ne pas travailler sous IE 9) est d’utiliser la margin et la transform . Il suffit de supprimer float right et margin;0 auto de ul , comme ci-dessous:

 #header ul { /* float: right; */ /* margin: 0 auto; */ display: inline-block; margin-left: 50%; /* From parent width */ transform: translateX(-50%); /* use self width which can be unknown */ -ms-transform: translateX(-50%); /* For IE9 */ } 

De cette façon, vous pouvez résoudre le problème qui rend la largeur dynamic du centre ul si vous ne vous souciez pas de IE8, etc.

Nous pouvons définir la largeur pour la balise ul puis il alignera le centre.

 #header ul { display: block; margin: 0 auto; width: 420px; max-width: 100%; }