html – 在Bootstrap内垂直居中两个

编辑：只是想澄清这些跨度有不明高度(因为响应)！

我试图在< div class =“row”>内的两个< div class =“span6”>在Bootstrap中,我使用任何我通常的技巧有问题,如display：inline-block;或显示：table-cell; (这是我正在工作的JSFiddle：http://jsfiddle.net/mA6Za/).

这是我试图使用的,这在Bootstrap中不起作用：

<div class="container">
    <div class="row" style="display: table">
        <div class="span6" style="height: 300px; background: red; display: table-cell !important; vertical-align: middle;">
            Block 1 - Vertically center me please!
        </div>
        <div class="span6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle;">
            Block 2- Center me too
        </div>
    </div>
</diV>

可以垂直对齐这两个.span6,以使Block1和Block2的高度都不知道？我想使用Bootstrap,因为负责任的功能,但平板电脑我们希望内容垂直对齐.

解决方法

如果您想要将div的内容垂直居中或实际的div自身,我不认为你很清楚.无论如何,这两个选项都有解决方案：

垂直居中的实际div

首先是垂直对齐div的解决方案：jsFiddle

它的工作原理是设置display：table; on .container和display：table-cell;在.row.一旦完成,你可以设置vertical-align：middle;在.row上垂直居中的内容.

我也不得不手动强制.row的宽度为960px,这不是很敏感(你可以使用media queries修复),但是在设置之后Bootstrap设置的.px的边距左边不起作用显示：table-cell;在.row.不强制添加这些额外的20px将导致第二个div结束在第一个div以下,因为它们不会同时在同一行上合并.我设置了一些高度：100％;在所有元素上进行演示.

CSS

.container {
    margin-top: 10px;
    display: table;
    height: 100%;
}
.row {
    min-width: 960px;
    display: table-cell;
    height: 100%;
    vertical-align:middle;
}

垂直居中的div的内容

如果要垂直居中的div的内容,可以通过设置display：table来做到这一点.在.row和设置显示：table-cell; on .span6.你也需要摆脱float：left;通过将其设置为float：无.span6.

这是一个演示此选项的小提琴：jsFiddle

html – 在Bootstrap内垂直居中两个

解决方法

相关文章