Twitter Bootstrap – wie man Elemente horizontal oder vertikal zentriert

Gibt es eine Möglichkeit, HTML-Elemente vertikal oder horizontal in den Haupteltern zu zentrieren?

Update : Während diese Antwort Anfang 2013 wahrscheinlich korrekt war, sollte sie nicht mehr verwendet werden. Die richtige Lösung verwendet Offsets .


Wie für andere Benutzer Vorschläge gibt es auch native Bootstrap-classn wie:

 class="text-center" class="pagination-centered" 

Danke an @Henning und @trejder

Aus der Bootstrap-Dokumentation :

Legen Sie ein display: block Element fest display: block und Zentrieren über den margin . Erhältlich als Mixin und class.

 
...

Für zukünftige Besucher dieser Frage:

Wenn Sie versuchen, ein Bild in einem div zu zentrieren, aber das Bild nicht zentriert, könnte dies Ihr Problem beschreiben:

jsFiddle DEMO des Problems

 

Die img-responsive class fügt dem image-Tag eine display:block statement hinzu, die die Textausrichtung stoppt text-align:center ( text-center class) funktioniert nicht.

LÖSUNG:

 

jsFiddle der Lösung

Das Hinzufügen der class center-block überschreibt die display:block statement, die mithilfe der img-responsive class img-responsive .

Ohne die img-responsive class würde das Bild nur durch Hinzufügen der text-center class zentriert werden

Sie können direkt in Ihre CSS-Datei schreiben:

 .content { position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); } 
 

some text

Aktualisiert 2018

In Bootstrap 4 haben sich die Zentrierungsmethoden geändert.

Horizontales Zentrum in BS4

  • text-center wird immer noch für die display:inline Elemente
  • mx-auto ersetzt center-block zu Center- display:flex Kinder
  • offset-* oder mx-auto kann verwendet werden, um offset-*

mx-auto (automatische X-Achsen-Ränder) vw display:block oder display:flex Elemente, die eine definierte Breite haben , ( % , vw , px , etc ..). Flexbox wird standardmäßig in Rasterspalten verwendet, daher gibt es auch verschiedene Flexbox-Zentrierungsmethoden.

Demo Bootstrap 4 Horizontale Zentrierung

Für die vertikale Zentrierung in BS4 siehe https://Stackoverflow.com/a/41464397/171456

ich benutze das

   
content here

Für die horizontale Zentrierung kann man so etwas haben:

 .centering{ float:none; margin:0 auto } 

Ich mag diese Lösung von einer ähnlichen Frage. https://StackOverflow.com/a/25036303/2364401 Verwenden Sie die Bootstrap- text-center class für die Elemente

der tatsächlichen Tabellen-Daten und für die Tabellen-Header

. Damit

Cell data

und

Header cell data

Mit Bootstrap 4 können Sie flex verwenden

 

Quelle: Bootstrap 4.1