在Bootstrap中垂直居中两个<div class ="span6">

Question

编辑:只是想澄清这些跨度有未知的高度(因为响应)!

我试图在Bootstrap中垂直对齐两个<div class="span6">人<div class="row">,并且我在使用任何常用技巧时遇到问题,例如display: inline-block;或display: 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,但对于平板电脑+我们希望内容垂直对齐.

Answer 1

如果你想要将s的内容div垂直居中或者实际上div是自己的,我认为你并不清楚.无论如何,这两种选择都有一个解决方案:

垂直居中实际div的

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

它的工作原理是display: table;开启.container和display: table-cell;关闭.row.一旦做到这一点,你可以设置vertical-align: middle;在.row垂直居中其内容.

我也有手动强制的宽度.row是960px,这是不是非常敏感(你可以修复使用媒体查询),但margin-left的-20px它引导设置在.row设置后不能正常工作display: table-cell;的.row.不强行添加这些额外的20px将导致第二个div结束于第一个以下,因为它们不会再在同一行上组合在一起.height: 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和设置display: table-cell;上.span6.你还就需要摆脱float: left;对.span6通过将其设定float: none.

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