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:
1 2 3 |
|
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:
1 2 3 4 |
|
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:
1 2 3 |
|
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!