引導3網格行 - 中心對齊圖像和文本

Question

我想在Bootstrap 3中相當簡單的東西，但無法弄清楚如何使它工作。

目標是獲得一個網格行，其中第一個元素具有一個小圖像（50x50）和一個大高度（300）。行中其餘的元素應該具有相同的高度（300px），但其寬度根據網格/文本大小而定。

代碼： http://jsfiddle.net/fL7xpw67/

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-1 icon vcenter"><img src='http://placehold.it/50x50' /></div> 
     <div class="col-md-3 vcenter" ><p>Element1</p></div> 
     <div class="col-md-3 vcenter" ><p>Element2</p></div> 
     <div class="col-md-3 vcenter" ><p>Element3</p></div> 
     <div class="col-md-1 vcenter" ><p>Element4</p></div> 
    </div> 
</div> 

CSS：

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

.icon { 
    display:table; 
    height: 300px; 
    border-collapse: separate; 
} 

但我無法弄清楚如何獲得的圖標網格單元的中心。有什麼建議麼？我的大部分代碼都是從StackOverflow的其他想法中提取的，但沒有任何幫助。

Answer 1

由於您的問題的約束涉及固定的高度，這是一個相對簡單的問題。只需將您的列到固定高度：

.row > div { 
    height: 300px; 
} 

然後實現自己的垂直居中，對孩子使用display: table的列，以及display: table-cell與vertical-align: middle：

.vcenter { 
    display: table; 
} 
.vcenter p { 
    display: table-cell; 
    vertical-align: middle; 
} 

參見：http://jsfiddle.net/fL7xpw67/3/

請注意，我必須將<p>元素添加到標記中的.icon列。