0

我正在尝试使用 Bootstrap 流体行作为显示表，这样我就可以将孩子从上到下居中。

注意：我不知道行的高度或跨度的高度，也不想使用 JavaScript。

这是html：

<div class="container-fluid">
    <div class="row-fluid vCenterParent">
        <div class="span6 left-style vCenterChild">
            <div>Left Side</div>
            <div>Left Side</div>
            <div>Left Side</div>
            <div>Left Side</div>
        </div>

        <div class="span6 right-style vCenterChild">
            <div>Right Side</div>
        </div>
    </div>
</div>

这是CSS：

.left-style {
    background-color: green;
}

.right-style {
    background-color: blue;
}

.vCenterParent {
    display: table !important;
}

.vCenterChild {
    display: table-cell !important;
    vertical-align: middle;
}

这是 JSFiddle：http: //jsfiddle.net/rsparrow/q2Ted/

（注意：运行demo的浏览器窗口至少需要750px，以防止响应式设计启动）

我希望绿色和蓝色框在行内从上到下居中。

现在它看起来像这样：

在此处输入图像描述

我希望它看起来像这样：

在此处输入图像描述

4

2 回答 2

1

您将需要为此使用 jquery ..

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

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

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

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

});

代码

<div class="container-fluid">
  <div class="row-fluid">
    <div id="left" class="span6" style="background: red;">
       <div>Left Side</div>
        <div>Left Side</div>
        <div>Left Side</div>
        <div>Left Side</div> 
    </div>
    <div id="right" class="span6" style="background: blue;">
      right side
    </div>
</div>

bootply 链接在这里http://bootply.com/88320

于 2013-10-17T13:47:19.730 回答
0

考虑到 Prasanna 的答案不是你想要的，我用他的例子来改进你想要的答案。

我不认为有一种 CSS 方式来做你想要在这里实现的目标（至少不是简单地或完全地你显示的方式）

$(document).ready(function() {
    var ver_top;
    if($('#left').height() > $('#right').height()) {
        ver_top = ($('#left').height() - $('#right').height()) / 2;
        $('#right').css( "margin-top", ver_top+'px' );
    }
    else if($('#left').height() < $('#right').height()){
        ver_top = ($('#right').height() - $('#left').height()) / 2;
        $('#left').css( "margin-top", ver_top+'px' );
    }
});

主要是我们正在做的是检查是否#left有#right一个更大的height，然后将两者height之间的差异的一半添加到两者中margin-top较小的那个上。如果它们相同，则不执行任何操作。

应该做你正在寻找的东西。

小提琴

于 2013-10-17T17:20:40.043 回答