垂直與Bootstrap3使用inline-block的伎倆

Question

對齊考慮例如：http://jsfiddle.net/xExxp/1/

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-4"> 
      <img src='http://upload.wikimedia.org/wikipedia/en/2/2b/Small-logo.jpg' /> 
     </div> 
     <div class="col-xs-12 col-md-8 vcenter">BAR</div> 
    </div> 
</div> 

和我有CSS：

.vcenter { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
} 

好像不工作，任何想法？

Answer 1

如果上面的圖片就是你要找的輸出：

CSS：

.headerrow{ 
display: table; 
} 

.logoimage{ 
display: table-cell; 
} 
.vcenter { 
    display: table-cell; 
    vertical-align: middle; 
    float: none; 
} 

HTML：

<div class="container"> 
    <div class="row headerrow"> 
     <div class="col-xs-12 col-md-4 logoimage"> 
      <img src='http://upload.wikimedia.org/wikipedia/en/2/2b/Small-logo.jpg' /> 
     </div> 
     <div class="col-xs-12 col-md-8 vcenter">BAR</div> 
    </div> 
</div>