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

130

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

Quelqu'un peut-il me dire 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>
html css margin zeckdude
la source
Quel navigateur utilisez-vous? IE / Win a quelques problèmes avec Margin auto.
JD Frias
Pourquoi faites-vous également flotter votre ul vers la droite? Sortez ça, et probablement aussi le flotteur: laissé pour le li, et ça devrait aller.
Simon
1
Je crée une barre de navigation. J'ai sorti le flotteur à droite pour l'ul et mis un flotteur à gauche pour le li, mais cela met tout à gauche maintenant.
zeckdude

Réponses:

135

Vous devez définir la largeur de l'élément que vous centrez, et non 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 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;
}
PatrikAkerstrand
la source
2
Et si la largeur du ul était dynamique. Je pense mettre dynamiquement différents textes dans les li avec PHP plus tard, donc j'essaie d'anticiper cela.
zeckdude
2
Oui, alors vous ne pouvez pas centrer en utilisant margin: auto;
PatrikAkerstrand
1
J'ai essayé votre dernière suggestion, mais cela n'a pas fonctionné. J'ai téléchargé la dernière version avec vos recommandations au même endroit afin que vous puissiez voir ce que je vis. L'ul est juste poussé vers la droite d'environ 50 pixels.
zeckdude
1
Comme je l'ai dit dans ma suggestion, retirez le flotteur: gauche
PatrikAkerstrand
1
Cela a très bien fonctionné! Merci beaucoup de rester avec moi et de m'aider! Ce problème me tue! Merci encore!
zeckdude
44

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 à droite et peut donc être influencé par les marges.

Voici comment cela fonctionne pour moi:

#content {
display: block;
margin: 0 auto;
}
Hoeks
la source
Merci pour la suggestion très utile, j'ai eu le même problème avec un élément en ligne et je ne pouvais pas comprendre pourquoi cela ne fonctionnait pas
mastazi
C'est la meilleure réponse et fonctionne pour une fenêtre de plusieurs tailles.
Yuda Prawira
14

Pourquoi pas?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}
kalys.osmonov
la source
J'ai ajouté text-align: left; à #header ul pour centrer le ul et garder le texte dans le li aligné à gauche. J'avais également besoin de définir ul pour qu'il s'affiche en tant que bloc en ligne pour que la largeur soit dynamique (auto).
Brent Self
3

Je ne sais pas pourquoi la première réponse est la meilleure, je l' ai essayé et ne fonctionne pas en fait, comme dit @ kalys.osmonov, vous pouvez donner text-align:centerà header, mais vous devez faire ulcomme inline-blockplutôt que inline, et vous devez avis qui text-alignpeut être hérité, ce qui n'est pas bon dans une certaine mesure, donc la meilleure façon (ne fonctionnant pas sous IE 9) est d'utiliser marginet transform. Il suffit de supprimer float rightet margin;0 autode 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 de création d'une largeur dynamique du ulcentre si vous ne vous souciez pas d'IE8, etc.

bill dou
la source
0

Nous pouvons définir la largeur de la balise ul, puis elle s'alignera au centre.

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