Bootstrap行流體顯示器：垂直對齊的表？

我正在嘗試使用Bootstrap流體行作爲顯示錶，所以我可以將子中心從頂部到底部居中。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/

（注：運行演示的瀏覽器窗口中必須至少750px以防止響應式設計從踢起）

我希望綠色和藍色框在該行內上下居中。

現在它看起來是這樣的：

enter image description here

我希望它看起來像這樣：

enter image description here

來源

2013-10-17 Richard N. Sparrow

我不知道我理解的問題。你能展現你的想法嗎？ –

@GiovanniSilveira僅供參考，我剛剛更新了這個問題，添加了我想要實現的圖像，以及它現在的樣子。 –

您將需要使用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鏈接在這裏http://bootply.com/88320

來源

2013-10-17 13:47:19

選擇這個，因爲它看起來像只有CSS沒有辦法做到這一點。 –

考慮到人員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在兩者中較小的一個上。如果它們相同，則不執行任何操作。

應該做你正在尋找的。

Fiddle

來源

2013-10-17 17:20:40

Bootstrap行流體顯示器：垂直對齊的表？

回答

相關問題