Bootstrap 4 - Objekte vertikal zentrieren

Question

Ich habe eine Webseite, die Bootstrap 4 Beta verwendet. Auf dieser Seite habe ich eine Inline-Liste. Ich möchte, dass der Inhalt jedes Listenelements vertikal zentriert ist, damit die Elemente in einer Linie stehen. Wie in dieser Bootply gezeigt, sind sie derzeit nicht in der Mitte. Ich verwende den folgenden Code:

Meine Frage ist, wie bekomme ich die Listenelemente vertikal zentriert werden?

Answer 1

Es sieht aus, als ob Flexbox nicht

Try this angewendet:

.align-items-center { 
    -ms-flex-align: center!important; 
    align-items: center!important; 
    display: flex; 
    justify-content: center; 
} 

Bootply Demo

Hinweis: Es gibt keine CSS-Methode von vertikal Ausrichtung der Inhalte der Elemente, die tun nicht teilen ein Elternteil miteinander. Das obige richtet die li ... nicht ihren Inhalt aus .. aber scheint den Effekt zu haben, den Sie suchen.

Answer 2

die mitgelieferten Flexbox utils verwenden (ohne zusätzliche CSS ist erforderlich) ..

<ul class="list-inline text-center d-flex justify-content-center align-items-center"> 
    <li class="list-inline-item"><h2>Hello</h2></li> 
    <li class="list-inline-item"><button class="btn btn-info btn-sm">Help</button></li> 
</ul> 

https://www.bootply.com/NLcGDLFEjJ

Answer 3

Es ist sehr einfach. Fügen Sie einfach die Bootstrap-Klasse align-middle zu beiden Tags <li> hinzu.

<ul class="list-inline text-center align-items-center"> 
    <li class="list-inline-item align-middle"><h2>Hello</h2></li> 
    <li class="list-inline-item align-middle"><button class="btn btn-info btn-sm">Help</button></li> 
</ul> 

Hoffe, das hilft. Sie können das Ergebnis here überprüfen.