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 - 垂直居中列表項目

回答

相關問題