Warum kann ich nicht mit Rand zentrieren: 0 Auto?

130

Ich habe eine #headerDiv, die ist, 100% widthund innerhalb dieser Div habe ich eine ungeordnete Liste. Ich habe mich margin: 0 autoauf die ungeordnete Liste beworben , aber sie wird nicht im Header-Div zentriert.

Kann mir bitte jemand sagen warum? Ich dachte, wenn ich die Breite des übergeordneten Div definiere, sollte sich die ungeordnete Liste zentrieren können margin: 0 auto. Was vermisse 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>
html css margin Zeckdude
quelle
Welchen Browser verwenden Sie? IE / Win hat einige Probleme mit Margin Auto.
JD Frias
Warum schwebst du auch deine Ul nach rechts? Nehmen Sie das heraus, und wahrscheinlich auch den Schwimmer: links für die li, und es sollte Ihnen gut gehen.
Simon
1
Ich erstelle eine Navigationsleiste. Ich habe den Schwimmer rechts für die Ul herausgenommen und einen Schwimmer links für die Li eingesetzt, aber das bringt jetzt alles auf die linke Seite.
Zeckdude

Antworten:

135

Sie müssen die Breite des Elements definieren, das Sie zentrieren, nicht das übergeordnete Element.

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

Edit : Ok, ich habe die Testseite jetzt gesehen und hier ist, wie ich denke, dass du es willst:

#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
quelle
2
Was ist, wenn die Breite der Ul dynamisch ist? Ich denke darüber nach, später mit PHP dynamisch einen anderen Text in die Li's einzufügen, also versuche ich das zu antizipieren.
Zeckdude
2
Ja, dann können Sie nicht mit dem Rand zentrieren: auto;
PatrikAkerstrand
1
Ich habe Ihren neuesten Vorschlag ausprobiert, aber er hat nicht funktioniert. Ich habe die neueste Version mit Ihren Empfehlungen an denselben Ort hochgeladen, damit Sie sehen können, was ich erlebe. Die Ul wird gerade um 50px nach rechts geschoben.
Zeckdude
1
Wie ich in meinem Vorschlag sagte, entfernen Sie den Schwimmer: links
PatrikAkerstrand
1
Das hat super funktioniert! Vielen Dank, dass du bei mir bleibst und mir hilfst! Dieses Problem hat mich umgebracht! Danke noch einmal!
Zeckdude
43

Ein Inline-Block deckt die gesamte Linie ab (von links nach rechts), sodass ein Rand links und / oder rechts hier nicht funktioniert. Was Sie brauchen, ist ein Block. Ein Block hat links und rechts Ränder, die durch Ränder beeinflusst werden können.

So funktioniert es bei mir:

#content {
display: block;
margin: 0 auto;
}
Hoeks
quelle
Vielen Dank für den sehr nützlichen Vorschlag, ich hatte das gleiche Problem mit einem Inline-Element und ich konnte nicht herausfinden, warum es nicht funktionierte
Mastazi
Dies ist die beste Antwort und funktioniert für Fenster mit mehreren Größen.
Yuda Prawira
14

Warum nicht?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}
kalys.osmonov
quelle
Ich habe Textausrichtung hinzugefügt: links; auf #header ul, um die ul zu zentrieren und den Text in der Li linksbündig zu halten. Ich musste auch die ul so einstellen, dass sie als Inline-Block angezeigt wird, damit die Breite dynamisch (automatisch) ist.
Brent Self
3

Ich weiß nicht , warum die erste Antwort die beste ist, versuchte ich es und in der Tat nicht arbeiten, wie @ kalys.osmonov sagte, können Sie geben text-align:centerzu header, aber Sie haben zu machen , ulwie inline-blockstatt inline, und auch Sie haben zu bemerken , Das text-alignkann vererbt werden, was bis zu einem gewissen Grad nicht gut ist. Der bessere Weg (funktioniert nicht unter IE 9) ist die Verwendung von marginund transform. Entfernen Sie einfach float rightund margin;0 autoaus 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 */
}

Auf diese Weise kann das Problem behoben werden, dass die dynamische Breite der ulMitte festgelegt wird, wenn Sie sich nicht für IE8 usw. interessieren.

Rechnung dou
quelle
0

Wir können die Breite für das ul-Tag einstellen, dann wird die Mitte ausgerichtet.

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