Bootstrap 4 - 垂直居中列表项

Question

我有一个使用 Bootstrap 4 beta 的网页。在此页面中，我有一个内联列表。我希望每个列表项的内容垂直居中，以便项目对齐。如本 Bootply 所示，它们目前偏离中心。我正在使用以下代码：

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

我的问题是，如何让列表项垂直居中？

Answer 1

好像还没有应用flexbox

试试这个：

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

Bootply Demo

注意：没有CSS垂直对齐不共享父元素的元素内容的方法。以上对齐 li...不是它们的内容..但似乎具有您正在寻找的效果。

Answer 2

使用包含的 flexbox 实用程序（不需要额外的 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

很简单。只需将 bootstrap class 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.

Answer 4

对我来说，在 li 元素中使用 d-flex 并将 my-auto class 添加到该元素有效

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

Bootstrap 4 - 垂直居中列表项

Bootstrap 4 - Vertically Centering List Items

css

twitter-bootstrap

twitter-bootstrap-4