Twitter Bootstrap - wie man Elemente horizontal oder vertikal zentriert

285

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

css twitter-bootstrap

— da ich bin
quelle

2

Dies ist ein großartiger Beitrag zum horizontalen und vertikalen Zentrieren: Siehe hier

— markvandencorput

2

Auch ich hatte ein Problem mit der horizontalen Ausrichtung. Ich habe einfach das <center></center>Tag

— Utpal - Ur Best Pal

4

@ Utpal-UrBestPal Das <center>Tag war vor ungefähr 12 Jahren veraltet.

— Niels Keurentjes

246

Update : Obwohl diese Antwort wahrscheinlich Anfang 2013 richtig war, sollte sie nicht mehr verwendet werden. Die richtige Lösung verwendet Offsets .

Wie für andere Benutzer vorgeschlagen, gibt es auch native Bootstrap-Klassen wie:

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

danke an @Henning und @trejder

— da ich bin
quelle

22

Das exakt gleiche Design ist bereits in Bootstrap enthalten. Verwenden Sie einfachclass="text-center"

— Henning

3

Oder .pagination-centeredals Alternative.

— Trejder

7

Dies sollte die Antwort sein, die anderen ignorieren den gesamten "In Bootstrap" -Teil der Frage.

— Ryan McDonough

1

@ RyanMcDonough ja effektiv ist dies riassuming alle anderen Leute vorgeschlagen, so dass ich als Antwort überprüft ok?

— Es ist der

1

Die Verwendung text-centerfür das Layout ist eine sehr schlechte Praxis. Die richtige Methode zum Ausrichten von Spalten in Bootstrap ist die Verwendung von col-XX-offset-YKlassen. getbootstrap.com/css/#grid-offsetting . Diese Antwort war 2013 wahrscheinlich richtig, sollte aber heute nicht mehr verwendet werden.

— Niels Keurentjes

76

Aus der Bootstrap-Dokumentation :

Setzen Sie ein Element auf display: blockund zentrieren Sie übermargin . Erhältlich als Mixin und Klasse.

<div class="center-block">...</div>

— m0000g
quelle

55

Für zukünftige Besucher dieser Frage:

Wenn Sie versuchen, ein Bild in einem Div zu zentrieren, das Bild jedoch nicht zentriert wird, kann dies Ihr Problem beschreiben:

jsFiddle DEMO des Problems

<div class="col-sm-4 text-center">
    <img class="img-responsive text-center" src="myPic.jpg" />
</div>

Die img-responsiveKlasse fügt display:blockdem Bild-Tag eine Anweisung hinzu, die verhindert, dass text-align:center( text-centerKlasse) funktioniert.

LÖSUNG:

<div class="col-sm-4">
    <img class="img-responsive center-block" src="myPic.jpg" />
</div>

jsFiddle of the solution

Das Hinzufügen der center-blockKlasse überschreibt die display:blockAnweisung, die mithilfe der img-responsiveKlasse eingegeben wurde.

Ohne die img-responsiveKlasse würde das Bild nur durch Hinzufügen einer text-centerKlasse zentriert

Aktualisieren:

Außerdem sollten Sie die Grundlagen der Flexbox und deren Verwendung kennen, da Bootstrap4 sie jetzt nativ verwendet .

Hier ist ein exzellentes, schnelles Video-Tutorial von Brad Schiff

Hier ist ein toller Spickzettel

— Cssyphus
quelle

32

Aktualisiert 2018

In Bootstrap 4 haben sich die Zentrierungsmethoden geändert.

Horizontales Zentrum in BS4

text-centerwird immer noch für display:inlineElemente verwendet
mx-autoersetzt, center-blockum display:flexKinder zu zentrieren
offset-* oder mx-auto kann zum Zentrieren von Rasterspalten verwendet werden

mx-auto(auto x-Achsen - Ränder) im Mittelpunkt display:blockoder display:flexElemente , die eine haben definierte Breite , ( %, vw, px, etc ..). Flexbox wird standardmäßig für Rasterspalten verwendet, daher gibt es auch verschiedene Flexbox-Zentrierungsmethoden.

Demo Bootstrap 4 Horizontale Zentrierung

Informationen zur vertikalen Zentrierung in BS4 finden Sie unter https://stackoverflow.com/a/41464397/171456

— Zim
quelle

30

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

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

<div class = "content" >
  
   <p> some text </p>
  </div>

Erweitern Sie das Snippet

— kirgiz_jigit
quelle

9

ich benutze das

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0 0;
    }

    .container-fluid {
        height: 100%;
        display: table;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    .row-fluid {
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
    }

    .centering {
        float: none;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="offset3 span6 centering">
                content here
            </div>
        </div>
    </div>
</body>

— Atabak
quelle

1

Funktioniert in bestimmten Fällen nicht (siehe Kommentar zu im Wesentlichen derselben Antwort und verwendet keine Bootstrap-spezifischen Klassen zum Zentrieren .

— Dan Dascalescu

7

Für die horizontale Zentrierung können Sie Folgendes verwenden:

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

 <div class="span8 centering"></div>

— PersianMan
quelle

4

Funktioniert nicht (zumindest nicht in der aktuellen Implementierung), wenn es direkt in einem Image verwendet wird : <img src="img/logo.png" style="float:none; margin:0 auto" />. Umgeben imgmit Eltern divund geben .text-centeroder .pagination-centeredKlasse Elternteil wirkt wie ein Zauber.

— Trejder

2

Um ein Element mit dem Rand: 0 auto zu zentrieren, müssen Sie diesem Element eine Breite hinzufügen. Im obigen Beispiel ist keine Breite angegeben, da span8 eine Breite in boobstrap hat, Ihr Bild jedoch nicht. <Img src = "img / logo.png" style = "float: none; margin: 0 auto; width: 300px" /> zentriert das Bild horizontal innerhalb des übergeordneten

— Elements

2

Dies ignoriert den "Bootstrap" -Teil der Frage.

— Dan Dascalescu

5

Ich mag diese Lösung aus einer ähnlichen Frage. https://stackoverflow.com/a/25036303/2364401 Verwenden Sie die Bootstraps- text-centerKlasse für die tatsächlichen Tabellendaten <td>und Tabellenkopfelemente <th>. So

<td class="text-center">Cell data</td>

und

<th class="text-center">Header cell data</th>

— Xander-Miller
quelle

5

Mit Bootstrap 4 können Sie Flex verwenden

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

Quelle: Bootstrap 4.1

— alvseek
quelle

3

Bootstrap 4 + Flex lösen dies

Sie können verwenden

<div class="d-flex justify-content-center align-items-center">
    <button type="submit" class="btn btn-primary">Create</button>
</div>

Erweitern Sie das Snippet

Es sollte den Mittelpunkt horizontal und vertikal zentrieren

— taoufiqaitali
quelle

0

Ich habe in Bootstrap 4 festgestellt, dass Sie dies tun können:

Mitte horizontal ist in der Tat text-centerKlasse

Bei der vertikalen Mitte wird jedoch bei Verwendung von Bootstrap-Klassen beides hinzugefügt, mb-auto mt-autosodass Rand oben und Rand unten auf automatisch gesetzt werden.

— online Thomas
quelle

0

für Bootstrap4 vertikale Mitte weniger Elemente

D-Flex für Flex-Regeln

Flex-Säule für vertikale Richtung auf Gegenständen

Justify-Content-Center für die Zentrierung

style = 'height: 300px;' muss für Sollwerte haben, bei denen der Mittelpunkt berechnet werden soll, oder muss die Klasse h-100 verwenden

<div class="d-flex flex-column justify-content-center bg-secondary" style="
    height: 300px;
">
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
    <div class="p-2 bg-primary">Flex item</div>
  </div>

— Ramil Gilfanov
quelle