Warum kann ich nicht Zentrieren mit margin: 0 auto?

StackOverflow https://stackoverflow.com/questions/963636

  •  12-09-2019
  •  | 
  •  

Frage

Ich habe ein #header div, die 100% width ist und in diesem div Ich habe eine ungeordnete Liste. Ich habe margin: 0 auto auf die ungeordnete Liste angewandt, aber es wird nicht im Header div zentriert.

Kann jemand bitte sagen Sie mir, warum? Ich dachte, wenn ich die Breite des übergeordneten div definieren, dann ist die ungeordnete Liste sollte selbst in der Lage sein, zum Zentrum 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>
War es hilfreich?

Lösung

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

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

Bearbeiten : Ok, ich habe die Testseite jetzt gesehen, und hier ist, wie ich glaube, 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;
}

Andere Tipps

Ein Inline-Block umfasst die gesamte Zeile (von links nach rechts), so dass ein Rand links und / oder rechts wird hier nicht funktionieren. Was Sie brauchen, ist ein Block, ein Block grenzt auf der linken Seite und das Recht, so kann durch die Margen beeinflusst werden.

Dies ist, wie es funktioniert für mich: 

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

Warum nicht? 

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

Ich weiß nicht, warum die erste Antwort die beste ist, ich habe es versucht, und in der Tat nicht arbeiten, wie @ kalys.osmonov sagte, Sie text-align:center geben können header, aber Sie haben ul als inline-block zu machen, anstatt inline, und auch das muss man text-align feststellen kann vererbt werden, was zu einem gewissen Grad nicht gut ist, so ist der bessere Weg (nicht unter IE arbeitet 9) mit margin und transform. Entfernen Sie einfach float right und margin;0 auto von 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 beheben, dass die dynamische Breite von ul Zentrum zu machen, wenn Sie kümmern sich nicht IE8 etc.

Wir können die Breite für ul-Tag gesetzt, dann wird es Mitte auszurichten. 

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top