Wie kann ich Inhalte in Twitter Bootstrap 3 vertikal zentrieren?

Vertikale Zentrierung von Inhalten in Twitter Bootstrap 3

Viele Benutzer sind bei der vertikalen Zentrierung von Text und Bildern in Twitter Bootstrap 3 auf Herausforderungen gestoßen. Dieser Artikel liefert dazu eine Lösung, die reaktionsfähige und dynamische Inhalte nutzt.

Ein Ansatz besteht darin, die zu nutzen display:inline-block-Eigenschaft anstelle von float. Dadurch können Inhalte vertikal ausgerichtet werden und gleichzeitig auf unterschiedliche Bildschirmgrößen reagiert werden. Durch die Einbindung von vertical-align:middle werden sowohl Text als auch Bilder vertikal zentriert.

Um diese Lösung zu implementieren, fügen Sie einfach das folgende CSS hinzu:

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

Dies zentriert sowohl Text als auch Bilder, unabhängig von ihrer relativen Größe.

Eine funktionierende Demonstration ist unter http://bootply.com/94402 verfügbar. Zeigt, wie der Inhalt dynamisch auf Änderungen der Bildschirmauflösung reagiert und dabei die vertikale Ausrichtung beibehält.

Das obige ist der detaillierte Inhalt vonWie kann ich Inhalte in Twitter Bootstrap 3 vertikal zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!