Bootstrap 4 - 垂直對齊列表項目內容

Question

我有一個使用Bootstrap 4的應用程序。在這個應用程序中，我有一個內聯列表。我需要垂直居中每個列表項目的內容。此時，每個項目的內容都垂直居中，如Bootply所示。相關代碼如下所示：

<ul class="list-inline" style="text-align: center;"> 
    <li class="list-inline-item"> 
    <div class="list-option">Football</div> 
    </li> 
    <li class="list-inline-item"> 
    <div class="list-option">Baseball</div> 
    </li> 
    <li class="list-inline-item"> 
    <div class="list-option">Basketball</div> 
    </li> 
    <li class="list-inline-item"> 
    <div class="list-option">Golf</div> 
    </li> 
    <li class="list-inline-item"> 
    <div class="list-option">Hockey</div> 
    </li> 
</ul> 

我發佈了一個類似的SO問題here。但是，在這個問題上，我還不夠具體。回答者確實回答了這個問題。出於這個原因，我想確保他們得到信用並且開了一個新的問題。這個問題實際上是關於在每個項目中垂直居中內容。我如何在Bootstrap 4中執行此操作？

Answer 1

添加

display: flex; 
justify-content: center; 
align-items: center; 

到.list-option

bootply