html – 在Bootstrap内垂直居中两个

前端之家收集整理的这篇文章主要介绍了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

原文链接:https://www.f2er.com/html/230987.html

猜你在找的HTML相关文章