Warum zentriert mein „margin: 0 auto;' mein Element nicht innerhalb eines übergeordneten Elements mit 100 % Breite?

Warum ein Element mit „margin: 0 auto;“ zentrieren? Innerhalb einer Breite von 100 % funktioniert das übergeordnete Div nicht

Problembeschreibung:

Stellen Sie sich dieses Szenario vor: Sie haben ein übergeordnetes Div mit einer Breite von 100 % und einem ungeordneten Liste darin. Sie haben „margin: 0 auto;“ angewendet. zur ungeordneten Liste, um sie zu zentrieren, aber sie weigert sich, sich zu bewegen.

Problemursache:

Der Kern des Problems liegt in der Tatsache, dass Sie es definiert haben die Breite des übergeordneten Div, nicht des Elements, das Sie zentrieren möchten. Für „marge: 0 auto;“ Um effektiv zu arbeiten, muss die Breite des zentrierten Elements angegeben werden.

Lösung:

Um dieses Problem zu beheben, weisen Sie der ungeordneten Liste eine Breite zu:

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

Zusätzliche Überlegungen:

Um ein eleganteres Ergebnis zu erzielen Beachten Sie beim Erscheinungsbild die folgenden Verfeinerungen:

• Entfernen Sie „float: left;“ Eigenschaft aus den „li“-Elementen, da sie mit „display: inline“ in Konflikt steht und in IE6 und früheren Browsern zu einer unbeabsichtigten Randverdoppelung führt.
• Wenden Sie die folgenden Stileigenschaften direkt auf die „li“-Elemente an:

#header ul li {
    color: #CCCCCC;
    display: inline;
    font-size: 20px;
    padding-right: 20px;
}

Das obige ist der detaillierte Inhalt vonWarum zentriert mein „margin: 0 auto;' mein Element nicht innerhalb eines übergeordneten Elements mit 100 % Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!