Wie zentriere ich Inhalte in Bootstrap 4 vertikal?

Vertikale Ausrichtung in Bootstrap 4

Problemeinführung

In Bootstrap 4 kann die vertikale Ausrichtung bestimmter Elemente eine Herausforderung darstellen. Eine häufige Schwierigkeit entsteht beim Versuch, Inhalte innerhalb einer Zeile vertikal zu zentrieren, insbesondere das Element mit dem Text „Lieferant“.

Lösungsübersicht

Bootstrap 4 führt mehrere Methoden für die vertikale Ausrichtung ein, einschließlich Flexbox-Dienstprogrammen , automatische Ränder und Anzeigedienstprogramme.

Flexbox Ansatz

Bootstrap 4 Alpha 5 und früher:

<div class="row">
    <div class="col-xs-6">
        <div class="circle-medium backgrounds"></div>
    </div>
    <div class="col-xs-6 flex-xs-middle">
        <div class="name">Supplier</div>
    </div>
</div>

Bootstrap 4 Stable:

<div class="row">
    <div class="col-sm-12 align-self-center">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

Bootstrap 4 Flexbox von Standard:

<div class="row">
    <div class="col-sm-12 d-flex align-items-center justify-content-center">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

Auto-Margins-Ansatz

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block">
            Supplier
        </div>
    </div>
</div>

Display-Utilities-Ansatz

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            Supplier
        </div>
    </div>
</div>

Schlussfolgerung

Diese Methoden bieten verschiedene Optionen zum vertikalen Ausrichten von Elementen in Bootstrap 4. Denken Sie daran, den Ansatz zu wählen, der Ihren spezifischen Anforderungen und Browserkompatibilität am besten entspricht Überlegungen.

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