Wie zentriere ich Inhalte in Bootstrap 3 vertikal?

Inhalte in Twitter Bootstrap 3 vertikal zentrieren

Bei der Arbeit mit dynamischen Inhalten in Bootstrap 3 besteht eine häufige Herausforderung darin, sowohl Text als auch Bilder vertikal zu zentrieren , insbesondere wenn ihre Größen variieren können. So können Sie dieses reaktionsfähige, vertikal zentrierte Layout erreichen:

Lösung:

Anstatt die herkömmliche Float-Eigenschaft zu verwenden, entscheiden Sie sich für display:inline-block und wenden Sie Vertical an -align:middle auf die relevanten Elemente mit Folgendem CSS:

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

Erklärung:

• display:inline-block ermöglicht es Elementen, nebeneinander zu sitzen, während die Möglichkeit erhalten bleibt, Höhe und Breite anzuwenden.
• vertikal-align:middle richtet die vertikale Mitte des Elements an der Mitte seines übergeordneten Elements aus.
• Das Negativ margin-right passt den Abstand zwischen Elementen für ein verfeinertes Layout an.

Demo:

Eine Live-Demonstration finden Sie unter: http://bootply. com/94402

Diese Lösung stellt sicher, dass sowohl Text als auch Bilder vertikal in ihren jeweiligen Spalten zentriert sind, auch wenn sich ihre Größe dynamisch ändert, und sorgt so für eine reaktionsfähige und visuelle Darstellung ansprechendes Layout.

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