web-dev-qa-db-fra.com

Pourquoi ne puis-je pas centrer avec margin: auto?

J'ai un #header div qui est 100% width et dans ce div, j'ai une liste non ordonnée. J'ai appliqué margin: 0 auto à la liste non ordonnée mais elle ne la centrera pas dans l'en-tête div. 

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

Voici mon code: 

<style>

* {
    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;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>
htmlcssmargin
119
zeckdude

Vous devez définir la largeur de l'élément que vous centrez, pas celle de 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 tu le veux:

#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;
}
123
PatrikAkerstrand

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

Voici comment cela fonctionne pour moi:

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

Pourquoi pas?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}
13
kalys.osmonov

Je ne sais pas pourquoi la première réponse est la meilleure, je l'ai essayée et ne fonctionne pas, comme @ kalys.osmonov l'a dit, vous pouvez donner text-align:center à header, mais vous devez faire ul comme inline-block plutôt que inline, et vous devez aussi remarquer que text-align peut être hérité, ce qui n'est pas bon dans une certaine mesure, donc le meilleur moyen (ne fonctionnant pas en dessous de IE 9) utilise margin et transform. Supprimez simplement 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 */
}

Cela peut résoudre le problème de largeur dynamique de ul center si vous ne vous souciez pas de IE8, etc.

2
bill dou

Nous pouvons définir la largeur de la balise ul pour qu’elle soit centrée.

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