14

编辑：只是想澄清这些跨度的高度未知（因为响应能力）！

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

4

6 回答 6

20

如果您希望's的内容div垂直居中或实际div's 本身，我认为您并不清楚。无论如何，这两种选择都有解决方案：

垂直居中实际div的

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

它通过设置display: table;on.container和display: table-cell;on 来工作.row。完成后，您可以设置将其内容垂直居中vertical-align: middle;。.row

我还必须手动强制 to 的宽度.row，960px这不是很敏感（你可以使用媒体查询来解决这个问题），但是Bootstrap 设置的设置margin-left在设置后不起作用。不强行添加这些额外内容会导致第二个最终低于第一个，因为它们不再适合在同一行上。出于演示目的，我在所有元素上设置了一些'。-20px.rowdisplay: table-cell;.row20pxdivheight: 100%;

CSS

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

垂直居中div的内容

如果您想将div's 的内容垂直居中，可以通过设置display: table;on.row和设置display: table-cell;on 来实现.span6。您还需要通过将其设置为来摆脱float: left;on 。.span6float: none

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

于 2013-05-29T00:53:45.593 回答
1

由于您使用的是固定高度并且只有一条线，因此您可以轻松地使用line-height它。

.span6:first-child{
    line-height:300px;
}

.span6{
    line-height:170px;
}

见小提琴：http: //jsfiddle.net/mA6Za/1/

于 2013-05-22T02:39:13.817 回答
1

尝试这样做http://jsfiddle.net/mA6Za/2/

<div class="container">
    <div class="row" style="display: table">
        <div class="span6" style="height: 300px; background: red; display: table-cell !important; position: absolute; top: 50%; margin-top: -150px; ">
            Block 1 - Vertically center me please!
        </div>
        <div class="span6 offset6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle; top: 50%; margin-top: -85px ;  position: absolute " >Block 2- Center me too
        </div>
    </div>
</div>
于 2013-05-22T02:39:59.900 回答
1

更新

所以我错了，我原来的答案不起作用，这就是原因。Bootstrap 仍在将 afloat: left应用于所有<div class="span*">元素。

/* From Bootstrap; some differences based on media query */
[class*="span"]
{
   float: left;
   min-height: 1px;
   margin-left: 30px;
}

.cell您可以通过对我的原始答案中的样式进行以下更改来覆盖这些规则：

.cell
{
    display: table-cell;
    float: none;
    vertical-align: middle;
}

但是，您将失去小屏幕上元素的响应“堆叠”（我认为您不想要），而是保留“表格”外观。为了防止这种情况发生，您很可能必须display: table; float: none;使用您自己的媒体查询来设置样式。

尽管如此，Bootstrap 的意图并不是将内容显示为 CSS 表格，因此通过覆盖样式来这样做，您可能会在显示中引入其他“错误”。

这是一个更新的小提琴要审查：http: //jsfiddle.net/7Y8Jv/3/

原始答案

这是你要找的东西：http: //jsfiddle.net/7Y8Jv/1/？

我的标记和样式看起来与您的没有太大不同，但我得到了您要求的垂直居中。

标记

<div class="container">
    <div class="row table">
        <div class="span6 cell">What Is Lorem Ipsum?</div>
        <div class="span6 cell">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
</div>

CSS

.table
{
    display: table;
}

.cell
{
    display: table-cell;
    vertical-align: middle;
}
于 2013-05-28T22:40:59.990 回答
0

听起来您想要两行，每行占据屏幕的一半。

为什么不使用 将offset3行移动四分之一（从而将其放在您想要的位置），然后仍然span6在两个单独的行中使用：

<div class="container">
    <div class="row">
        <div class="offset3 span6">Block 1 - Vertically center me please!</div>
    </div>
    <div class="row">
        <div class="offset3 span6">Block 2- Center me too</div>
    </div>
</diV>

JSFiddle：http: //jsfiddle.net/mA6Za/3/

于 2013-05-28T22:25:21.077 回答
0

使用 jquery 的一些技巧...

1) 使用 id 获取跨度高度

2) 对边距顶部做一些数学运算

3）然后，设置CSS

它也适用于窗口调整大小。

在 jsfiddle 上演示... http://jsfiddle.net/q49Da/

HTML

<div class="container"> 
    <div class="row">   
        <div id="red" class="span6" style="background: red;width:40%;float:left;margin-right:5%;">
            Block 1 - Vertically center me please!<br />
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
        </div>
        <div id="blue" class="span6" style="background: blue;width:40%;float:left;">
            Block 2- Center me too<br />
            Contrary to popular belief, Lorem Ipsum is not simply random text.
        </div>
    </div>
</div>

查询

$(document).ready(function() {
    var ver_top = ($(window).height() - $('#red').height()) / 2;
    $('#red').css( "margin-top", ver_top+'px' );

    var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
    $('#blue').css( "margin-top", ver_top2+'px' );

    $(window).resize(function(){
        var ver_top = ($(window).height() - $('#red').height()) / 2;
        $('#red').css( "margin-top", ver_top+'px' );

        var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
        $('#blue').css( "margin-top", ver_top2+'px' );
    });
});
于 2013-05-29T06:28:27.500 回答