中心子div垂直無知知道父母的高度

我想知道如何在不知道父母div高度的情況下垂直居中父div內的子div？中心子div垂直無知知道父母的高度

我有一個pinterest風格的畫廊頁面（圖片）和懸停我顯示圖像頂部的div與圖像的信息。因爲每個圖像可能有不同的高度，所以我不知道如何將子內容集中到父div的中間。

我正在使用jQuery Masonary插件來創建佈局。

目前我有一個外部div包含圖像。一個背景顏色爲白色（或其他）的內部div，其位置爲0,0，寬度和高度爲100％。這一切都很好，我可以簡單地使用text-align：center;

非常感謝！

來源

2013-02-01 puks1978

等等..你想要*垂直居中*或*水平*？ –

你試過像'display：table'，'display：table-cell'這樣的CSS規則，然後應用一個CSS'vertical-align：center'？ – MatRt

垂直。我已經能夠水平設置足夠容易，但我不知道每個外部div的高度，以便能夠將垂直對齊設置爲中間 – puks1978

這應該工作，以設置它爲中心的兩種方式。還沒有測試：

var ParentW = $("parent-id").width(); 
var ParentH = $("parent-id").height(); 
var ChildW = $("child-id").width(); 
var ChildH = $("child-id").height(); 
var PosW = (ParentW - ChildW)/2; 
var PosH = (ParentH - ChildH)/3; 
$("child-id").css({"top":PosH, "left": PosW });

來源

2013-02-01 01:14:47

工程很好。謝謝 – puks1978

不客氣，快樂編碼:) –

如果您需要CSS解決方案，我認爲這可以爲你工作。

舉例來說，如果你有這樣的佈局：

<div class="container"> 
    <div class="parent"> 
     <div class="child"> 
      Lorem ipsum.... 
     </div> 
    </div> 
</div>

這個CSS，你應該能夠在水平方向和垂直居中的.parent容器內的.child塊：

.parent { 
    /* change values to adjust the top and bottom space used to vertically center */ 
    padding-top: 33%; 
    padding-bottom: 33%; 
} 

.child { 
    width: 50%; /* the width is not mandatory, of course */ 
    margin: auto; 
    overflow: hidden; 
}

你可以測試它here。希望這可以有任何幫助。

來源

2013-02-01 01:54:24 Ragnarokkr

中心子div垂直無知知道父母的高度

回答

相關問題