blocks|key|1451140|text|为此，您需要使用jquery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1451141|$(document).ready(function()+{
var+ver_top+=+($(window).height()+-+$('#left').height())+/+2;
$('#left').css(+"margin-top",+ver_top%2B'px'+);

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

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

++++var+ver_top2+=+($(window).height()+-+$('#right').height())+/+2;
++++$('#right').css(+"margin-top",+ver_top2%2B'px'+);
});|code-block|syntax|javascript|1451142|})；|1451143|HTML代码|1451144|<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>|1451145|引导链接在这里，http://bootply.com/88320|offset|length|1451146|entityMap|0|LINK|mutability|MUTABLE|url|http://bootply.com/88320^0|0|0|0|0|0|8|O|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>You will need to use jquery for this..</p>

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

<p>});</p>

<p>HTML CODE</p>

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

<p>
 And the bootply link is here <a href="http://bootply.com/88320" rel="nofollow">http://bootply.com/88320</a></p>


blocks|key|302268|text|考虑到普拉萨纳的回答不是你想要的，我用他的例子来改进你想要的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|302269|我认为这里没有CSS的方法来实现你想要达到的目标(至少不是简单的或者确切的显示方式)|302270|$(document).ready(function()+{
++++var+ver_top;
++++if($('#left').height()+>+$('#right').height())+{
++++++++ver_top+=+($('#left').height()+-+$('#right').height())+/+2;
++++++++$('#right').css(+"margin-top",+ver_top%2B'px'+);
++++}
++++else+if($('#left').height()+<+$('#right').height()){
++++++++ver_top+=+($('#right').height()+-+$('#left').height())+/+2;
++++++++$('#left').css(+"margin-top",+ver_top%2B'px'+);
++++}
});|code-block|syntax|javascript|302271|我们所做的主要工作是检查#left或#right是否有更大的height，然后将两者之间的height差的一半加到较小的height上。如果它们是相同的，则不会执行任何操作。|offset|length|style|CODE|302272|应该做你想要的事情。|302273|小提琴|302274|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/q2Ted/14/^0|0|0|0|C|5|I|6|U|6|19|6|1O|6|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@$K|14|L|15|M|N]|$K|16|L|17|M|N]|$K|18|L|19|M|N]|$K|1A|L|1B|M|N]|$K|1C|L|1D|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@$K|1G|L|1H|1|1I]]|A|$]]|$1|S|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Considering that Prasanna's answer wasn't what you were looking for, I used his example to improve the answer to what you want.</p>

<p>I dont think there is a CSS way to do what you are trying to achieve here (at least not simply or exactly how you displayed)</p>

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

<p>Mainly what we are doing is checking to see if <code>#left</code> or <code>#right</code> has a bigger <code>height</code>, and then add half of the difference in <code>height</code> between the two as <code>margin-top</code> on the smaller of the two. If they are the same, nothing is performed.</p>

<p>Should do exactly what you are looking for.</p>

<p><strong><a href="http://jsfiddle.net/q2Ted/14/" rel="nofollow">Fiddle</a></strong></p>


<p>I'm trying use a Bootstrap fluid row as a display table so I can center the child spans top to bottom.</p>

<p>Note: I will not know the height of the row or the height of the spans and don't want to use JavaScript.</p>

<p>Here's the html:</p>

<pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row-fluid vCenterParent"&gt;
        &lt;div class="span6 left-style vCenterChild"&gt;
            &lt;div&gt;Left Side&lt;/div&gt;
            &lt;div&gt;Left Side&lt;/div&gt;
            &lt;div&gt;Left Side&lt;/div&gt;
            &lt;div&gt;Left Side&lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="span6 right-style vCenterChild"&gt;
            &lt;div&gt;Right Side&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here's the CSS:</p>

<pre><code>.left-style {
    background-color: green;
}

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

.vCenterParent {
    display: table !important;
}

.vCenterChild {
    display: table-cell !important;
    vertical-align: middle;
}
</code></pre>

<p>Here's the JSFiddle: <a href="http://jsfiddle.net/rsparrow/q2Ted/" rel="nofollow noreferrer">http://jsfiddle.net/rsparrow/q2Ted/</a></p>

<p>(Note: The browser window for the running demo needs to be at least 750px to prevent the responsive design from kicking in)</p>

<p>I'd like the green and blue boxes to be centered top to bottom within the row.</p>

<p>Right now it looks like this:</p>

<p><img src="https://i.stack.imgur.com/xPIDS.png" alt="enter image description here"></p>

<p>I want it to look like this:</p>

<p><img src="https://i.stack.imgur.com/EDxpB.png" alt="enter image description here"></p>


Bootstrap row-fluid display: table with vertical-align?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在尝试使用一个引导流体行作为一个显示表，这样我就可以使孩子从上到下的中间。注意:我将不知道行的高度或跨度的高度，并且不想使用JavaScript。下面是html：<div class="container-fluid">    <div class="row-fluid vCenterParent">       ...

问引导行-流体显示:表与垂直对齐？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导行-流体显示:表与垂直对齐？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导行-流体显示:表与垂直对齐？
EN