Bootstrap 4 - 垂直居中列表项目

我有一个使用Bootstrap 4测试版的网页。在这个页面中，我有一个内联列表。我希望每个列表项目的内容都是垂直居中的，以便项目排列起来。如Bootply所示，它们目前处于偏离中心的位置。我正在使用下面的代码：Bootstrap 4 - 垂直居中列表项目

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

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

来源

2017-08-25 user687554

看起来好像Flexbox的尚未应用于

试试这个：

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

Bootply Demo

注：有一种垂直对齐元素的内容是没有CSS方法做彼此不共享父母。以上对齐li ...不是他们的内容..但似乎有你正在寻找的效果。

来源

2017-08-25 12:44:11

出于好奇，我复制了这些列表项，将一个h2更改为h1，将另一个从h2更改为h6。任何想法为什么只有h6看起来有点偏离中心？ https://www.bootply.com/16F7svEvwD – ganders

使用附带的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

来源

2017-08-25 14:15:24 ZimSystem

它非常简单。只需将引导程序类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。

来源

2017-08-25 14:40:56

Bootstrap 4 - 垂直居中列表项目

回答

相关问题