Wie erreicht man eine vertikale Ausrichtung in Bootstrap 4?

Vertikale Ausrichtung in Bootstrap 4

Das Ausrichten von Elementen wie Textelementen in Bootstrap 4 kann frustrierend sein. Normalerweise kann das Text-Alignment-Dienstprogramm nur für die horizontale Ausrichtung verwendet werden, und die meisten vertikalen Ausrichtungstechniken werden normalerweise durch Hinzufügen zusätzlicher Markierungen und Überschreiben des Standardstils implementiert.

flex-xs-middle class

Ältere Versionen von Bootstrap (wie Bootstrap 3 und frühere Versionen von Bootstrap 4) verwenden die Klasse „flex-xs-middle“ für die Vertikale Mittelelemente. Diese Klasse kann einem Container hinzugefügt werden, um seinen Inhalt mithilfe von Flexbox vertikal zu zentrieren:

<div class="container-fluid">
    <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>
    <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>
</div>

Bootstrap 4.0.0-Updates

Ab Bootstrap 4.0.0, Flexbox werden zur Standardeinstellung. Daher ist es jetzt möglich, Elemente mithilfe verschiedener Methoden vertikal auszurichten:

automatische Ränder

Das Dienstprogramm my-auto kann verwendet werden, um Elemente automatisch vertikal zu zentrieren. zum Beispiel:

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

flexbox

flexbox Dienstprogramme wie align-self-center können zum Ausrichten einer einzelnen Spalte oder aller Spalten in einer ganzen Zeile verwendet werden, zum Beispiel:

<div class="row">
    <div class="col-6 align-self-center">
        <div class="card card-block">Center</div>
    </div>
    <div class="col-6">
        <div class="card card-inverse card-danger">Taller</div>
    </div>
</div>

Anzeigedienstprogramme

Bootstrap 4 enthält außerdem eine Reihe von Anzeigedienstprogrammen, die als Alternative zur vertikalen Ausrichtung verwendet werden können, zum Beispiel:

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

Das obige ist der detaillierte Inhalt vonWie erreicht man eine vertikale Ausrichtung in Bootstrap 4?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!