Vertical-align mit Bootstrap 3

Question

Ich verwende Twitter Bootstrap 3 und habe Probleme, wenn ich zwei div vertikal ausrichten möchte, zum Beispiel - JSFiddle link:

    Big

    Small

Das Rastersystem in Bootstrap verwendet float: left, nicht display:inline-block, daher funktioniert die Eigenschaft vertical-align nicht. Ich habe versucht, margin-top zu verwenden, um es zu beheben, aber ich denke, dass dies keine gute Lösung für das responsive Design ist.

Answer 1

Diese Antwort stellt einen Hack dar, aber ich würde Ihnen dringend empfehlen, flexbox zu verwenden (wie in der Antwort von @Haschem angegeben), da sie jetzt überall unterstützt wird.

Demos-Link:
- Bootstrap 3
- Bootstrap 4 alpha 6

Sie können immer noch eine benutzerdefinierte Klasse verwenden, wenn Sie diese benötigen:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

        Groß

        Klein

Bootply

Die Verwendung von inline-block fügt zusätzlichen Platz zwischen Blöcken hinzu, wenn Sie im Code ein echtes Leerzeichen lassen (wie ... ...). Dieser zusätzliche Platz zerstört unser Rastersystem, wenn die Spaltengrößen zusammen 12 ergeben:

        Groß

        Klein

Hier haben wir extra Leerzeichen zwischen

und

(ein Zeilenumbruch und 2 Tabs / 8 Leerzeichen). Und so...

Lassen Sie uns diesen zusätzlichen Platz entfernen!!

        Groß

        Klein

Beachten Sie die scheinbar nutzlosen Kommentare ? Sie sind wichtig - ohne sie nimmt der Zwischenraum zwischen den

Elementen Platz im Layout ein und zerstört das Rastersystem.

Hinweis: Das Bootply wurde aktualisiert

Answer 2

Aktualisierung 2020

Ich weiß, die ursprüngliche Frage war für Bootstrap 3, aber jetzt, da Bootstrap 4 veröffentlicht wurde, hier sind einige aktualisierte Richtlinien zur vertikalen Zentrierung.

Wichtig! Die vertikale Zentrierung ist relativ zur Höhe des Elternelements

Wenn das Elternelement des Elements, das du zentrieren möchtest, keine definierte Höhe hat, werden keine der vertikalen Zentrierungslösungen funktionieren!

Bootstrap 4

Da Bootstrap 4 standardmäßig Flexbox verwendet, gibt es viele verschiedene Ansätze zur vertikalen Ausrichtung mit: Auto-Margin, Flexbox-Utils oder den Display-Utils zusammen mit vertikale Ausrichtungs-Utils. Zuerst scheinen "vertikale Ausrichtungs-Utils" offensichtlich zu sein, aber diese funktionieren nur mit Inline- und Tabellen-Anzeige-Elementen. Hier sind einige Bootstrap 4-Optionen zur vertikalen Zentrierung.

---

1 - Vertikale Zentrierung mit Auto-Margin:

Ein weiterer Weg, um vertikal zu zentrieren, ist die Verwendung von my-auto. Dies zentriert das Element innerhalb seines Containers. Zum Beispiel macht h-100 die Reihe Vollhöhe und my-auto zentriert die col-sm-12-Spalte vertikal.

        Karte

Bootstrap 4 - Vertikale Zentrierung mit Auto-Margin Demo

my-auto stellt den Margin auf der vertikalen y-Achse dar und entspricht:

margin-top: auto;
margin-bottom: auto;

---

2 - Vertikale Zentrierung mit Flexbox:

Da Bootstrap 4 .row jetzt display:flex ist, kannst du einfach align-self-center auf jede Spalte verwenden, um sie vertikal zu zentrieren.

                 Zentrum

                    Größer

oder verwende align-items-center auf der gesamten .row, um alle col-* in der Reihe vertikal zentriert auszurichten.

                 Zentrum

                    Größer

Bootstrap 4 - Vertikale Zentrierung verschieden hoher Spalten Demo

---

3 - Vertikale Zentrierung mit Display-Utils:

Bootstrap 4 verfügt über Display-Utils, die für display:table, display:table-cell, display:inline, etc. verwendet werden können. Diese können mit den vertikale Ausrichtungs-Utils verwendet werden, um Inline-, Inline-Block- oder Tabellenzellen-Elemente auszurichten.

            Ich bin vertikal zentriert

Bootstrap 4 - Vertikale Zentrierung mit Display-Utils Demo

Siehe auch: Vertikale Ausrichtung zentrieren in Bootstrap 4

---

Bootstrap 3

Flexbox-Methode im Container des Elements zum Zentrieren:

.display-flex-center {
    display: flex;
    align-items: center;
}

Transformieren der translateY-Methode:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Display-Inline-Methode:

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

Demo der Bootstrap 3-Zentrierungsmethoden

Answer 3

Der folgende Code hat bei mir funktioniert:

.vertical-align {
    display: flex;
    align-items: center;
}

Answer 4

Versuchen Sie es in dem CSS des div:

display: table-cell;
vertical-align: middle;

Answer 5

Nach der akzeptierten Antwort, wenn Sie die Markup nicht anpassen möchten, aus Gründen der Trennung von Interessen oder einfach weil Sie ein CMS verwenden, funktioniert die folgende Lösung gut:

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}

      Groß

       Klein

Die Einschränkung hierbei ist, dass Sie die Schriftgröße nicht vom übergeordneten Element erben können, da die Zeile die Schriftgröße auf 0 setzt, um den Leerraum zu entfernen.