Bootstrap - 在列表中垂直對齊圖標

Question

我有一個使用Bootstrap 3的網頁。在此頁面中，我需要垂直對齊內聯列表中的圖標。此圖標位於一個圓圈內。所以，我想讓整個圓圈垂直對齊。我有一個Bootply安裝程序here。在這種Bootply，我有以下代碼：

<div class="row"> 
    <div class="col-xs-12"> 
    <ul class="list-inline"> 
     <li><div class="circle text-center"><i class="fa fa-star" style="font-size:18px; padding-top:6px;"></i></div></li> 
     <li> 
     <a href="https://www.example.com" style="font-size:16px;">Some Page</a> 
     <div style="font-size:14px;">A longer line of test that describes the link</div> 
     </li> 
    </ul>  
    </div> 
</div> 

如何垂直居中在第一li相對於第二li的內容的內容？

謝謝！

Answer 1

只需使用vertical-align: middle;

.list-inline>li { 
    vertical-align: middle; 
} 

http://www.bootply.com/BxgnmdnKZt

而且，你可能要考慮使用media對象，而不是..

<ul class="media"> 
     <li class="media-left media-middle"><div class="circle text-center"><i class="fa fa-star" style="font-size:18px; padding-top:6px;"></i></div></li> 
     <li class="media-right"> 
     <a href="https://www.example.com" style="font-size:16px;">Some Page</a> 
     <div style="font-size:14px;">A longer line of test that describes the link</div> 
     </li> 
    </ul> 

http://www.bootply.com/pR9JHBBSAE