Heim > Web-Frontend > CSS-Tutorial > Warum zentriert „margin: 0 auto;' meine ungeordnete Liste nicht?

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

Mary-Kate Olsen
Freigeben: 2024-12-03 06:55:14
Original
525 Leute haben es durchsucht

Why Doesn't `margin: 0 auto;` Center My Unordered List?

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

#header ul {

  margin: 0 auto;

}

Nach dem Login kopieren

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

#header ul {

  margin: 0 auto;

  width: 620px;  // or any desired width

}

Nach dem Login kopieren

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

#header ul li {

  display: inline;

}

Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage