2017-08-28 82 views
-1

我有一个使用Bootstrap 4的应用程序。在这个应用程序中,我有一个内联列表。我需要垂直居中每个列表项目的内容。此时,每个项目的内容都垂直居中,如Bootply所示。相关代码如下所示:Bootstrap 4 - 垂直对齐列表项目内容

<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中执行此操作?

+0

你为什么不提供一个'''顶margin'''? –

+0

把这个添加到你的'''list-option'''类来居中:'''padding-top:1.4rem;'''' –

回答

0

添加

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

.list-option

bootply