ブートストラップ - リスト内のアイコンの垂直方向の整列

Question

私はブートストラップ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

ちょうど..あなたが代わりにmediaオブジェクトを使用して検討する必要があり、またvertical-align: middle;

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

http://www.bootply.com/BxgnmdnKZt

使用

<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