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