Twitter Bootstrap 3中的垂直居中答案

【问题标题】：Vertical Centering in Twitter Bootstrap 3Twitter Bootstrap 3中的垂直居中
【发布时间】：2015-08-04 21:02:03
【问题描述】：

我正在尝试找出 bootstrap 3 中垂直对齐元素的最佳方法。

我在文档中搜索并没有找到任何垂直对齐的特殊类。

我希望文本和图像垂直对齐。有什么想法吗？

这是我的 jsfiddle http://jsfiddle.net/ttfgL6ns/1/

<div class="container-fluid">
    <div class="row">
        <div class="scenes green">
            <div class="col-xs-6 col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</div>
            <div class="col-xs-6 col-md-6">
                <img src="http://lorempixel.com/400/200" />
            </div>
        </div>
    </div>
</div>

而且，在类行的div之前或之后添加一个div更正确（<div class "row"）？

谢谢

【问题讨论】：

签出：css-tricks.com/centering-css-complete-guide
Vertically Center in Twitter Bootstrap 的可能副本

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用引导程序，您需要先在 DIV 父级上配置height。之后，在 DIV 孩子上，您可以像这样使用top:50%：

<div class="container-fluid">
<div class="row">
    <div class="scenes green">
        <div style="height:200px;"> 
            <div class="col-xs-6 col-md-6" style="top: 50%;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</div>
            <div class="col-xs-6 col-md-6">
                <img src="http://lorempixel.com/400/200" />
            </div>
        </div>
    </div>
</div>

希望对你有帮助。

【讨论】：

要使其垂直居中，您必须添加带有负边距的margin-top，等于块的高度。
我使用了图像的固定高度，所以我可以使用 top: 50%。如果图像与 200px 不同，那么这可能是个问题。

【解决方案2】：

在您的情况下，场景和绿色类的边距和填充应该驱动对齐方式。在 before/after 之间进行更好选择的答案是无关紧要的，“rows”只是告诉浏览器呈现响应式<table><tr>，并且在 col-class 中找到的所有子 div 被拆分为响应式<td></td>

“row”类之前的场景和绿色样式如果在之后声明，则将格式应用于相同的元素

【讨论】：

【解决方案3】：

尝试使用垂直对齐：中间属性仅适用于显示：表格单元格；元素。第二件事是垂直对齐仅适用于 display:inline;元素。

<div class="container-fluid">
    <div class="row">
        <div class="scenes green">
            <div class="col-xs-6 col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</div>
            <div class="col-xs-6 col-md-6 display-table-cell">
                <img src="http://lorempixel.com/400/200" />
            </div>
        </div>
    </div>
</div>

还有你的 CSS

.display-table-cell {
    display: table-cell;
    vertical-allign: middle;
}
/* just to be sure img is inline */
.display-table-cell img {
    display: inline;
}

【讨论】：

【解决方案4】：

您需要将类“col-md-12 col-xs-12”添加到类 col-md-6 col-xs-6 的父亲像这样：

<div class="scenes green col-md-12 col-xs-12">
        <div class="col-xs-6 col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</div>
        <div class="col-xs-6 col-md-6">
            <img src="http://lorempixel.com/400/200" />
        </div>
    </div>

【讨论】：