css - 垂直对齐一行中的内容，相对于 twitter bootstrap 3 中的整行

Question

我正在尝试将给定文本简介旁边的图标垂直 居中。作为一个简单的示例，结构如下所示 ( http://bootply.com/98109 ):

<div class="row">
    <div class="col-xs-2 text-center">icon</div>
    <div class="col-xs-10">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

更复杂的变化是，我还想将其中两行嵌套成一行，同时仍然将两个图标垂直对齐到相同的垂直位置。

我在这里创建了一个这种结构的(非工作)示例:

http://bootply.com/98111

知道如何实现吗？

Answer 1

检查这个solution

诀窍是使用显示表格和表格单元格

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