Question

我正在尝试使用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/

（注意：正在运行的演示的浏览器窗口必须至少为750像素，以防止响应式设计被踢入）

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

现在它看起来像这样：

enter image description here

我希望它看起来像这样：

enter image description here

Answer 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' );
});

}）;

HTML CODE

<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

Answer 2

考虑到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两个中较小的一个{{1}}。如果它们相同，则不执行任何操作。

应该完全按照你的意愿行事。

<强> Fiddle

Bootstrap行液显示：垂直对齐的表格？

2 个答案: