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

注意：没有 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