引导4-垂直居中列表项

使用附带的flexbox UTIL(不需要额外的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

看起来flexbox尚未应用

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

Bootply Demo

不共享父对象 彼此之间。上面对齐了 li ...不是他们的内容。。但似乎有你想要的效果。

align-middle 致双方 <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>

希望这有帮助。你可以检查结果 here .

对于我来说,在li元素中使用d-flex并将auto类添加到元素中是可行的

<li class="d-flex"><a class="my-auto" href="#">Some Title Here</a></li>