Bootstrap 4 - Vertical Center List Items

Question

I have a webpage using the beta version of Bootstrap 4. This page has a built-in list. I want the contents of each list item to be vertically centered so that the items line up. As shown in this Bootply , they are currently out of center. I am using the following code:

<ul class="list-inline text-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>

My question is: how to get list items so that they are vertically centered?

Answer 1

It looks like flexbox has not been applied

Try the following:

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

Bootply Demo

: CSS , . li... ... , , , .

Answer 2

flexbox utils ( CSS ).

<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

It is very simple. Just add the bootstrap class align-middleto the tags <li>.

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

Hope this helps. You can check the result here .