垂直居中兩格div

我嘗試了很多解決方案，但沒有任何工作。我有一個可變高度的div，它包含三個其他div並排。這很好。垂直居中兩格div

現在我想讓三個div中的兩個（左側和中間一個）垂直居中。但它不會工作。我嘗試過使用行高（適用於圖片），但行高必須與窗口高度相同。

這裏是我的html：

<div id="outerDiv"> 
    <div id="LeftDiv"> 
     <img id="imgArrow" src="images/arrow.png"> 
    </div> 
    <div id="middleDiv"> 
     <div id="buttonDiv" class="linkButton"></div> 
    </div> 
    <div id="rightDiv"> 
     <img id="imgIpad" src="images/ipad.png"> 
    </div> 
</div>

我的CSS：

#outerDiv{ 
    overflow:hidden; 
    width:100%; 
    border: 0px solid; 
    background-color:#e4ecfe; 
} 
#middleDiv{ 
    width: 35%; 
    float: left; 
    border: 1px solid; 
} 
#leftDiv{ 
    margin: auto; 
    width: 35%; 
    float: left; 
    left: -10%; 
    border: 1px solid; 
    text-align: center; 
} 
#rightDiv{ 
    width: 28%; 
    text-align: right; 
    float: left; 
} 
#buttonDiv{ 
    text-align: center; 
    border:1px solid; 
    border-radius:5px; 
    color:white;  
    line-height: 140%; 
    font-family: Arial; 
}

我是怎麼試試嗎？就像我說的那樣，我用線高度試了一下，但高度是可變的（取決於窗口的大小）。我也試過#outerDiv:before，但它也沒有工作。

有什麼建議嗎？

編輯：

的jsfiddle：http://jsfiddle.net/5cT2T/

SOLUTION：

獲取每jQuery的高度，並設置上邊距下面的代碼：

var height = $(window).height(), 
    middleHeight = $("#middleDiv").height(), 
    leftHeight = $("#leftDiv").height(); 
$('#leftDiv').css('margin-top', (height - leftHeight)/2); 
$('#middleDiv').css('margin-top', (height - middleHeight)/2);

來源

2014-04-04 Södy

提供鏈接到JSFiddle，即更好，更快找到解決方案 –

你可以試試這個鏈接http://phrogz.net/CSS/vertical-align/ – Priya

只需使用JavaScript（或jQuery）來計算窗口高度並進行相應調整。 – brandonscript

如果你想垂直居中另一個div中的div，最常用的技巧是將「position：absolute」內部div設置在外部div中，爲pos設置「top：50％」銀行足球比賽。

這樣做會使內部div的上邊界達到外部div高度的50％，因此只需在內部div的上方加上一個負值「margin-top」即可。負邊際值等於其高度的一半。

如果我正確理解你想要什麼......只需將你的LeftDiv和MiddleDiv包裝在一個容器中，然後在容器和LeftDiv之間應用建議的tecnique！ :-)

來源

2014-04-04 13:59:23

垂直居中兩格div

回答

相關問題