引导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列。