css - 垂直对齐 : middle with Bootstrap 2

Question

我使用 twitter bootstrap，我想将 div block 与右侧的图片和文本垂直对齐。

代码如下:

<ol class="row" id="possibilities">
     <li class="span6">
         <div class="row">
             <div class="span3">
                 <p>some text here</p>
                 <p>Text Here too</p>
             </div>
             <figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure>
         </div>
     </li>
     <li class="span6">
         <div class="row">
             <figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
             <div class="span3">
                 <p>Some text</p>
                 <p>Some text here too.</p>
             </div>
         </div>
     </li>
</ol>

我试过了，但不行:

.span6 .row{display: table;}
.span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}

我也试过这个:

.span6 .row .span3{display: inline-block; vertical-align: middle;}

没有一个在工作。有人有想法吗？提前致谢。

Answer 1

试试这个:

.row > .span3 {
    display: inline-block !important;
    vertical-align: middle !important;
}

编辑:

fiddle :http://jsfiddle.net/EexYE/

您可能需要添加 Diego 的 float: none !important; 如果 span3 是 float 的并且它会干扰。

编辑:

fiddle :http://jsfiddle.net/D8McR/

响应 Alberto:如果您固定行 div 的高度，那么要继续垂直居中对齐，您需要将行的行高设置为与行的像素高度相同(即。在你的情况下都是 300px)。如果你这样做，你会注意到子元素继承了行高，这在这种情况下是一个问题，所以你需要将 span3s 的行高设置为实际应该的值(1.5 是 fiddle 中的示例值，或字体大小的 1.5 倍，我们在更改行高时没有更改)。