Wie zentriere ich Elemente in Twitter Bootstrap horizontal und vertikal?

Eine umfassende Anleitung zum Zentrieren von Elementen in Twitter Bootstrap

Bei der Arbeit mit Twitter Bootstrap besteht die Notwendigkeit, Elemente innerhalb übergeordneter Container vertikal oder horizontal zu zentrieren kommt häufig vor. Dieses vielseitige Framework bietet mehrere Ansätze, um diese Ausrichtung zu erreichen.

Horizontale Zentrierung

1. text-center-Klasse: Wenden Sie das text-center an Klasse in den übergeordneten Container, um seinen Inhalt horizontal zu zentrieren. Dies ist eine einfache und effektive Methode sowohl für Text- als auch für Nicht-Textelemente.
2. mx-auto-Klasse: Wenn Sie mehr Flexibilität benötigen und die Zentrierung versetzen möchten, verwenden Sie mx-auto Klasse. Es fügt links und rechts vom Element automatische Ränder hinzu und verschiebt es in die Mitte.

Vertikale Zentrierung

Bootstrap bietet keine integrierte Funktion Dienstprogramm zur vertikalen Zentrierung. Es gibt jedoch zwei gängige Techniken:

1. Paginierungszentrierte Klasse: Um ein einzelnes Element innerhalb eines Containers mit Paginierungssteuerelementen vertikal zu zentrieren, wenden Sie die paginierungszentrierte Klasse auf die Paginierung an Control-Wrapper.
2. Benutzerdefiniertes CSS: Sie können auch benutzerdefiniertes CSS verwenden, um Elemente vertikal zu zentrieren. Legen Sie beispielsweise die Eigenschaften „margin-top: auto“ und „margin-bottom: auto“ für das Element fest, das Sie zentrieren möchten.

Hinweis:

Der Text -center- und paginierungszentrierte Klassen sind in neueren Versionen von Bootstrap veraltet. Es wird empfohlen, stattdessen die Dienstprogramme mx-auto und d-flex zu verwenden.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Elemente in Twitter Bootstrap horizontal und vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!