Wie zentriere ich Elemente in Twitter Bootstrap?

Zentrieren von Elementen in Twitter Bootstrap

Bei der Arbeit mit Twitter Bootstrap entsteht die Notwendigkeit, Elemente innerhalb ihrer übergeordneten Container zu zentrieren. Hier sind die Methoden, die Sie verwenden können:

Horizontale Zentrierung:

1. text-center-Klasse:Verwenden Sie die text-center-Klasse im übergeordneten Container, um alle untergeordneten Elemente horizontal auszurichten.

2. Inline-Styling: Legen Sie die CSS-Eigenschaft text-align: center auf dem übergeordneten Container oder dem untergeordneten Element fest, das Sie zentrieren möchten.

3. Offsets (Neue Methode): Die mx-auto-Klasse wurde in Bootstrap 4 eingeführt und fügt einem Element horizontale Ränder hinzu, wodurch es zentriert wird.

Vertikale Zentrierung:

1. padding-top und padding-bottom:Verwenden Sie die Eigenschaften padding-top und padding-bottom im übergeordneten Container, um vertikalen Abstand hinzuzufügen und die untergeordneten Elemente zu zentrieren.

2. Absolute Positionierung: Positionieren Sie das untergeordnete Element absolut und setzen Sie es oben: 50 %; und transformieren: Translate(-50%, -50%).

Hinweis: Die oben genannten Lösungen gelten für ältere Versionen von Bootstrap. Für Bootstrap 4 und höher ist die mx-auto-Klasse der empfohlene Ansatz für die horizontale Zentrierung.

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