Bootstrap 4-垂直居中列表项 [英] Bootstrap 4 - Vertically Centering List Items

问题描述

我有一个使用Bootstrap 4 Beta的网页.在此页面中，我有一个内联列表.我希望每个列表项的内容垂直居中，以便使这些项排成一行.如 Bootply 所示，它们目前不在中心.我正在使用以下代码:

I have a web page that uses the Bootstrap 4 beta. In this page, I have an inline list. I want the content of each list item to be vertically centered so the items line up. As shown in this Bootply, they're currently off-center. I'm 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 do I get the list items to be vertically centered?

推荐答案

好像没有应用flexbox

It looks as though flexbox hasn't been applied

尝试一下:

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

引导演示

注意:没有CSS方法可以垂直对齐彼此不共享父元素的元素的内容.上面的内容对齐了li ...不是它们的内容..但似乎具有您想要的效果.

Note: there is no CSS method of vertically aligning the contents of elements that do not share a parent with each other. The above aligns the li...not their contents..but seems to have the effect you are looking for.

这篇关于Bootstrap 4-垂直居中列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！