Question

我正在试图找出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 class "row"）添加div更为正确吗？

感谢

Answer 1

使用bootstrap你需要在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>

我希望它可以帮到你。

Answer 2

在你的情况下，场景和绿色类的边距和填充应该驱动对齐样式。在之前/之后更好地选择的答案是无关紧要的，＆＃34;行＆＃34;只是告诉浏览器呈现一个响应<table><tr>，所有与col-classes一起找到的子div被分割为响应<td></td>

课前的场景和绿色风格＆＃34; row＆＃34;如果在

之后声明，则将格式应用于相同的元素

Answer 3

尝试使用vertical-align：middle属性仅适用于display：table-cell;元件。第二件事是垂直对齐仅适用于显示：内联;元件。

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

Answer 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>

Twitter Bootstrap 3

4 个答案: