Vertikale Ausrichtung in der Bootstrap-4

können Sie die flex-xs-middle Klasse wie dieses..

Bootstrap-4 Alpha 5

<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>

http://www.codeply.com/go/PNNaNCB4T5 (Unter Verwendung des Bootstrap-4 flexbox CSS aktiviert)

Bootstrap-4

UPDATE für die Bootstrap-4.0.0

Nun, dass die Bootstrap-4 ist flexbox standardmäßig es gibt viele verschiedene Ansätze, um die vertikale Ausrichtung mit: auto-Margenflexbox-utilsoder die display-utils zusammen mit vertical align utils. Auf den ersten "vertical align utils" scheint offensichtlich, aber diese nur Arbeit mit inline-und table-display-Elemente. Unten sind die Bootstrap-4 vertikale Zentrierung Optionen. Denken Sie daran, vertikale Ausrichtung relativ zum parent Höhe.

1 - Vertikale Zentrierung Mittels Automatischer Ränder:

Anderen Weg, um vertikal-center ist zu verwenden my-auto. Dies zentriert das element innerhalb der container. Zum Beispiel h-100 macht die Zeile in voller Höhe, und my-auto wird vertikal zentrieren Sie die col-sm-12 Spalte.

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

Vertikale Zentrierung Mittels Automatischer Ränder Demo

my-auto stellt Margen auf der vertikalen y-Achse und ist äquivalent zu:

margin-top: auto;
margin-bottom: auto;

2 - Vertikal-Center mit Flexbox:

Da Bootstrap 4 .row ist jetzt display:flex können Sie einfach align-self-center auf jeder Spalte vertikal zu zentrieren...

       <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>

oder verwenden Sie align-items-center auf die gesamte .row vertikal zentrieren ausrichten alle col-* in der Zeile...

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

Der vertikalen Mitte der Verschiedenen Höhe Spalten Demo

Wichtig: Die direkt parent des Elements ausgerichtet werden, müssen eine definierte Höhe!

3 - Vertikale Center Mit Display-Utils:

Bootstrap-4 hat display-utilsdie verwendet werden können für display:tabledisplay:table-celldisplay:inline usw.. Diese können verwendet werden, mit der vertikale Ausrichtung utils ausrichten, inline, inline-block oder table-cell-Elemente.

<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>

Vertikal Center Mit Display-Utils Demo

InformationsquelleAutor der Antwort Zim