Twitter Bootstrap 3, Inhalt vertikal zentrieren [Duplikat]

StackOverflow https://stackoverflow.com//questions/20005278

Frage

Ich weiß, dass dies tausendmal gefragt wurde, aber ich finde keine Möglichkeit, den Text und das Bild vertikal zu zentrieren.

Ich verwende Twitter Bootstrap 3 mit dynamischen Inhalten, daher kenne ich weder die Größe des Textes noch des Bildes.Außerdem möchte ich, dass alles responsiv ist.

Ich habe eine erstellt bootply die die Art von Layout zusammenfassen, die ich erreichen möchte.Grundsätzlich möchte ich, dass Text und Bild vertikal zentriert sind.Der Text ist nicht immer größer als das Bild.

Kann mir bitte jemand dabei helfen?

Danke schön.

War es hilfreich?

Lösung

Sie können verwenden display:inline-block anstatt float Und vertical-align:middle mit diesem CSS: 

.col-lg-4, .col-lg-8 {
    float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}

Die Demo http://bootply.com/94402

Andere Tipps

Option 1 ist zu verwenden display:table-cell.Sie müssen den Bootstrap col-* mit entfloaten float:none..

.center {
    display:table-cell;
    vertical-align:middle;
    float:none;
}

http://bootply.com/94394

Option 2 Ist display:flex So richten Sie die Zeile vertikal mit der Flexbox aus:

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

http://www.bootply.com/7rAuLpMCwr

Die vertikale Zentrierung ist sehr unterschiedlich Bootstrap 4.Siehe diese Antwort für Bootstrap 4 https://stackoverflow.com/a/41464397/171456

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top