Wie kann ich Text und Bilder in Bootstrap 3 vertikal zentrieren?

Vertikale Zentrierung von Text und Bildern in Twitter Bootstrap 3 (Duplikat)

Es wurden zahlreiche Anfragen zur vertikalen Ausrichtung von Text und Bildern in gestellt Twitter Bootstrap 3. Dieses Thema bedarf weiterer Diskussion.

Bestimmen Sie bei der Verwendung von Bootstrap 3 mit dynamischen Inhalten die genaue Größe von visuellen Elementen kann eine Herausforderung sein. Darüber hinaus sollte das Layout reaktionsfähig bleiben.

Um sowohl Text als auch Bilder vertikal zu zentrieren, sollten Sie einen alternativen Ansatz in Betracht ziehen. Anstatt die Elemente schweben zu lassen, stellen Sie ihre Anzeige auf Inline-Block ein. Verwenden Sie außerdem „vertikal-align:middle“, um eine ordnungsgemäße vertikale Ausrichtung sicherzustellen.

Unten finden Sie ein Beispiel-CSS-Snippet, das diese Technik demonstriert:

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

Durch die Implementierung dieser Anpassungen können Sie Ihr Bild mühelos zentrieren Text und Bilder vertikal und reaktionsfähig, auch bei unbekannten Inhaltsdimensionen.

Eine Live-Demonstration finden Sie im folgenden Bootply Link:

http://bootply.com/94402

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