Wie erreicht man in Bootstrap 3 eine perfekte vertikale Text- und Bildausrichtung?

Vertikale Text- und Bildausrichtung in Twitter Bootstrap 3

Trotz der Verbreitung von Anfragen zu diesem Thema ist das Erreichen einer vertikalen Ausrichtung von Text und Bildern in Twitter Bootstrap 3 kann schwer zu fassen sein, insbesondere bei dynamischen Inhalten mit unterschiedlichen Abmessungen.

Um dieser Herausforderung zu begegnen, a Die Bootply-Demonstration wurde erstellt, um das gewünschte Layout zu veranschaulichen, bei dem Text und Bild unabhängig von ihrer relativen Größe vertikal zentriert sind.

Die Lösung liegt in der Verwendung von display:inline-block anstelle von float für Text und Bild Spalten. Dadurch können wir „vertikal-align:middle“ mit dem folgenden CSS verwenden:

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

Indem wir „margin-right“ auf einen negativen Wert setzen, stellen wir sicher, dass die Spalten nebeneinander platziert werden und gleichzeitig ihre vertikale Ausrichtung beibehalten .

Um diesen Ansatz zu testen, navigieren Sie zur Demo unter http://bootply.com/94402, wo Text und Bild vertikal korrekt zentriert sind und sich an unterschiedliche Inhalte anpassen Größen.

Das obige ist der detaillierte Inhalt vonWie erreicht man in Bootstrap 3 eine perfekte vertikale Text- und Bildausrichtung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!