问题描述
我有一个使用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-垂直居中列表项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!