Html 引导行流体显示：表格是否垂直对齐？

我正在尝试使用一个引导流体行作为显示表，这样我就可以使子跨度从上到下居中

注意：我不知道行的高度或跨距的高度，不想使用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>

以下是JSFIDLE：

（注意：运行演示的浏览器窗口需要至少为750px，以防止响应性设计生效）

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

现在看起来是这样的：

我希望它看起来像这样：

---

您需要为此使用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代码

<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链接

考虑到Prasanna的答案不是你想要的，我用他的例子来改进答案，使之符合你的要求

我不认为有一种CSS方法可以实现您在这里试图实现的目标（至少不是简单地或准确地显示您的方式）

$（文档）.ready（函数（）{
var ver_top；
如果（$（'#左'）.height（）>$（'#右'）.height（））{
ver#u top=（$（'左'）.height（）-$（'右'）.height（））/2；
$（'#right'）.css（“页边空白顶部”，veru-top+'px'）；
}
如果（$（'#左'）.height（）<$（'#右'）.height（））{
ver#u top=（$（'右'）.height（）-$（'左'）.height（））/2；
$（'#left'）.css（“页边空白顶部”，ver#u顶部+'px'）；
}
});

我们正在做的主要是检查

#left

或

#right

是否具有更大的

高度

，然后将两者之间

高度

差异的一半添加到两者中较小的

边距顶部

。如果它们相同，则不执行任何操作

应该做你想要的事情

---

我不确定我是否理解这个问题。你能展示一下你想要它是什么样子吗？@GiovanniSilveira，仅供参考，我刚刚更新了这个问题，添加了我想要实现的目标和现在的样子的图片。之所以选择这个，是因为看起来仅仅使用CSS是无法实现的。

<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>

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