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

看起来Flexbox还没有被应用

试试这个：

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

Bootply Demo

注意：没有CSS方法垂直对齐不共享父的元素的内容。以上对齐li ...而不是它们的内容..但似乎有你想要的效果。

Answer 3

非常简单。只需将引导类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 类添加到元素工作

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

Bootstrap 4 - 垂直居中列表项

4 个答案: