Wie kann ich Inhalte in Bootstrap 3 vertikal zentrieren?

Vertikale Zentrierung von Inhalten in Twitter Bootstrap 3

Für eine reaktionsfähige und dynamische vertikale Ausrichtung von Text und Bildern in Bootstrap 3 sollten Sie den folgenden Ansatz in Betracht ziehen :

CSS Code:

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

Erklärung:

Das bereitgestellte CSS nimmt notwendige Änderungen an den ursprünglichen Bootstrap-Spalten vor:

• float : none entfernt die horizontale Ausrichtung und ermöglicht eine vertikale Ausrichtung.
• display: inline-block behandelt Spalten als Inline-Elemente, die kann vertikal ausgerichtet werden.
• vertikal-align: middle vertikal zentriert den Inhalt innerhalb der Spalten.
• margin-right: -4px korrigiert kleinere Abstandsprobleme zwischen Spalten.

Demo:

Besichtigung [http://bootply.com/94402](http://bootply.com/94402), um eine Funktionsdemonstration dieser Lösung zu sehen.

Zusätzliche Hinweise:

• Stellen Sie sicher, dass die Containerelemente eine ausreichende Höhe haben, damit die vertikale Ausrichtung funktioniert.
• Wenn Sie benötigen unterschiedliche Spaltengrößen, passen Sie die col-lg-Klassen entsprechend an.
• Wenn Sie Probleme mit unterschiedlichen Bildgrößen haben, passen Sie die Vertical-Align-Eigenschaft nach Bedarf an.

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