Warum zentriert „margin: 0 auto;' meine ungeordnete Liste nicht?

Warum kann ich ein Element nicht mit „Rand: 0 Auto“ zentrieren?

Sie versuchen, eine ungeordnete Liste innerhalb einer Kopfzeile zu zentrieren div mit Rand: 0 auto. Für die Zentrierung reicht die Randautomatik allein jedoch nicht aus. Hier ist der Grund:

Grundlegendes zu Margin Auto

margin: 0 auto setzt den linken und rechten Rand auf „Auto“, wodurch das Element horizontal zentriert wird. Dies funktioniert jedoch nur, wenn die Breite des Elements explizit definiert ist.

In Ihrem Code:

#header ul {
  margin: 0 auto;
}

Sie haben die Breite des Header-Div definiert, aber nicht die Breite der ungeordneten Liste. Daher hat margin: 0 auto keine Auswirkung auf die Zentrierung der Liste.

Lösung:

Um die Liste zu zentrieren, müssen Sie ihre Breite explizit definieren:

#header ul {
  margin: 0 auto;
  width: 620px;  // or any desired width
}

Zusätzliche Überlegungen:

Wenn Sie Elemente wie z. B. horizontal zentrieren möchten Listen Sie Elemente innerhalb der Liste auf, definieren Sie die Breite und verwenden Sie display: inline oder float: left. Beachten Sie jedoch, dass sich schwebende Elemente unvorhersehbar verhalten können. Daher wird generell die Verwendung von Inline-Elementen empfohlen.

Zum Beispiel, um die Listenelemente zu zentrieren:

#header ul li {
  display: inline;
}

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