Warum kann ich nicht mit Rand zentrieren: 0 auto?

Ich habe eine #header div, dass ist 100% width - und innerhalb dieser div habe ich eine ungeordnete Liste. Ich habe mich beworben margin: 0 auto um die ungeordnete Liste, aber es wird nicht zentriert innerhalb des header-div.

Kann jemand mir bitte sagen, warum? Ich dachte, wenn ich definieren Sie die Breite des übergeordneten div, dann die ungeordnete Liste sollte in der Lage sein Zentrum selbst, mit margin: 0 auto. Was bin ich?

Hier ist mein 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>
Kommentar zu dem Problem - Öffnen
Welchen browser verwenden Sie? IE/Win hat einige Probleme mit Margin: auto. Kommentarautor: JD Frias
Warum tun Sie auch float-Ihre ul auf der rechten Seite? Nehmen Sie das raus, und wahrscheinlich auch das float:left für die li, und Sie sollten in Ordnung sein. Kommentarautor: Simon
firefox jetzt Kommentarautor: zeckdude
Ich bin erstellen einer Navigationsleiste. Ich habe aus der rechts float für ul und in einen float left für die li, aber das bringt es alles auf der linken Seite jetzt. Kommentarautor: zeckdude

InformationsquelleAutor der Frage zeckdude | 2009-06-08

  1. 118

    Müssen Sie legen Sie die Breite des Elements, Sie werden zentrieren, nicht das übergeordnete element.

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

    Bearbeiten: Ok, ich habe die Testseite jetzt und hier ist, wie ich denke, Sie wollen es:

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

    InformationsquelleAutor der Antwort PatrikAkerstrand

  2. 35

    Inline-block umfasst die ganze Zeile (von Links nach rechts), so dass ein Rand Links und/oder rechts, funktioniert hier nicht. Was Sie brauchen, ist ein block, ein block hat die Ränder Links und rechts so beeinflusst werden kann, um die Margen.

    Dies ist, wie es für mich funktioniert:

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

    InformationsquelleAutor der Antwort Hoeks

  3. 13

    Warum nicht?

    #header {
    text-align: center;
}

#header ul {
    display: inline;
}

    InformationsquelleAutor der Antwort kalys.osmonov

  4. 2

    Ich weiß nicht, warum die erste Antwort ist die beste, ich habe es ausprobiert und funktioniert nicht in der Tat, wie @kalys.osmonov sagte, Sie kann geben text-align:center zu header, aber Sie haben, um ul als inline-block eher als inline, und auch Sie haben, um zu bemerken, dass text-align kann vererbt werden, das ist nicht gut, zu einem gewissen Grad, so der bessere Weg (funktioniert nicht unter IE 9) ist mit margin und transform. Entfernen Sie einfach float right und margin;0 auto aus ul wie unten: 

    #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 */
}

    Diese Weise kann das problem beheben, dass die dynamische Breite der ul center, wenn Sie nicht kümmern, IE8 usw.

    InformationsquelleAutor der Antwort bill dou

Schreibe einen Kommentar