Warum zentriert „margin: 0 auto' mein Element nicht?

Warum Margin: 0 Auto Ihr Element nicht zentriert

Wenn Sie versuchen, ein Element mithilfe der automatischen Eigenschaft margin: 0 horizontal auszurichten, Es ist wichtig, die Breite des Elements anzugeben, das Sie zentrieren möchten, nicht das übergeordnete Element.

Stellen Sie sich die folgende Situation vor: Sie haben ein übergeordnetes Containerelement (#header) mit einer definierten Breite und einer ungeordneten Liste (

) darin. Das
Das Element sollte innerhalb des #header-Div horizontal zentriert werden, indem margin: 0 auto angewendet wird. Wenn Sie jedoch die Breite des
Element, wird es nicht im übergeordneten Container zentriert.

Um dieses Problem zu beheben, fügen Sie dem

-Element eine width-Eigenschaft hinzu. Element, zum Beispiel:

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

Dies weist dem

eine Breite von 90 % zu. Element, wodurch es innerhalb des #header-Div zentriert wird.

Aktualisiertes CSS für verbessertes Layout (Bearbeiten):

#header ul {
  list-style: none;
  margin: 0 auto;
  width: 90%;
}

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

Diese überarbeiteten Stile stellen sicher, dass das < ul> Element zentriert ist und seine Listenelemente inline angezeigt werden, wodurch alle Probleme beseitigt werden, die durch die Verwendung von float: left; innerhalb der

und Vermeidung der Verdoppelung der horizontalen Ränder in älteren Versionen von Internet Explorer.

Das obige ist der detaillierte Inhalt vonWarum zentriert „margin: 0 auto' mein Element nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!