垂直对齐：与 Bootstrap 2 居中答案

【问题标题】：vertical-align: middle with Bootstrap 2垂直对齐：与 Bootstrap 2 居中
【发布时间】：2012-07-21 12:46:01
【问题描述】：

我使用 twitter 引导程序，我想将 div 块与右侧的图片和文本垂直对齐。

代码如下：

<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;}

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

【问题讨论】：

你能做一个jsfiddle.net 演示吗？
包含 twitter 引导程序会使 jsfiddle 崩溃...抱歉
“使 jsfiddle 崩溃”是一个模糊的说法。
这是解决 jsFiddle 中引导包含问题的一种方法：jsfiddle.net/api/post/library/pure
那么...jsfiddle.net/kwBuW?

标签： css html twitter-bootstrap-2

【解决方案1】：

试试这个：

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

编辑：

小提琴：http://jsfiddle.net/EexYE/

如果 span3 是浮动的并且会产生干扰，您可能还需要添加 Diego 的 float: none !important;。

编辑：

小提琴：http://jsfiddle.net/D8McR/

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

【讨论】：

我怎样才能通过设置行 div 的高度来实现这个工作？ jsfiddle.net/EexYE/191
@AlbertoPellizzon 请参阅上面帖子的附加编辑。简而言之，您需要设置行 div 的行高以匹配您设置的高度，例如。高度和行高都为 300px。然后为了防止你的类型和图像显示不正确，你需要将 span3s 的 line-height 设置为正确的值，否则它只会从行 div 继承 300px。

【解决方案2】：

尝试从 span6 中删除 float 属性：

{ float:none !important; }

【讨论】：

【解决方案3】：

如果我没记错的话，.spanN 类是浮动的，这会自动使它们表现为display: block。要使display: table-cell 工作，您需要移除浮动。

【讨论】：

【解决方案4】：

除了之前的答案之外，您也可以随时使用 Pull 属性：

    <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 pull-right"><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>

【讨论】：

【解决方案5】：

我用这个

<style>
html, body{height:100%;margin:0;padding:0 0} 
.container-fluid{height:100%;display:table;width:100%;padding-right:0;padding-left: 0}   
.row-fluid{height:100%;display:table-cell;vertical-align:middle;width:100%}
.centering{float:none;margin:0 auto} 
</style>
<body>
<div class="container-fluid">
     <div class="row-fluid">
     <div class="offset3 span6 centering">
            content here
         </div>
    </div>
 </div>
</body>

【讨论】：