如何垂直對齊絕對位置在彼此頂部的一個div？

我有兩個div，我需要把它們放在另一個div的裏面。很簡單，我使用z-index並給他們定位：絕對。但每個div的內容都需要垂直對齊。當我將它們放置在頂部時，它們不會垂直居中。如何垂直對齊絕對位置在彼此頂部的一個div？

是否有混合這兩種風格的方法來做到這一點？

或者這可能與jQuery不知何故？

這基本上就是我所擁有的。

<div style="width:100%"> 
    <div style="height:400; width:400; display:table-cell; vertical-align:middle; z-index:0; position:absolute;"><img></div> 
    <div style="height:400; width:400; display:table-cell; vertical-align:middle; z-index:1; position:absolute;"><img></div> 
</div>

我有高度和寬度，表格單元格和垂直對齊爲中間。這會將內容置於中心位置，直到我添加我需要的z-index所需的絕對位置。

任何想法？謝謝，

來源

2012-05-22 IamFace

你有什麼反對'position：relative'？ –

圖像將是400x400或可變大小？ –

圖像將始終爲可變大小，具體取決於從用戶加載的內容。但是這兩幅圖像必須相互重疊，而且通常情況下，它們在視圖區域（它們所包含的div，這是一組大小）內會略小一些 – IamFace

你可以在裏面添加一個額外的div第二個：http://jsfiddle.net/MDJDx/

<div style="width:100%"> 
    <div style="height:400px; width:400px; display:table-cell; vertical-align:middle; z-index:0; position:relative;top:0;">img</div> 
    <div style="height:400px; width:400px; z-index:1; position:absolute; top:0"> 
    <div style="height:400px; width:400px; display:table-cell; vertical-align:middle; position:relative;">img</div> 
    </div> 
</div>

來源

2012-05-22 22:03:56 AvL

這是最好的選擇，似乎是唯一的方法使其與內聯 IamFace

添加

margin: auto;

與你想中心內容股利。爲此，你必須在這個div上設置一個寬度。

也許

width: 100%;

應該做的伎倆。

來源

2012-05-22 21:39:12

風格的兩個內部的div

position: relative; top: 0px;

除了你已經擁有

來源

2012-05-22 21:41:03

然後兩個div被堆疊，一個在另一個之下而不是在頂端：/ – IamFace

哦，我的錯誤，我認爲這就是你的意圖。抱歉!那麼你想讓它們從字面上重疊嗎？一個完全覆蓋另一個？ –

是的，他們實際上是有很多透明度的svg文件，用於創建效果 – IamFace

給你內心的div line-height:400px;

http://jsfiddle.net/2DXPg/1/

來源

2012-05-22 21:57:12

這似乎是正確的我想要什麼。標籤上還需要「垂直對齊，文本對齊和線條高度」，才能使用它？我的圖像將內聯 IamFace

由於某種原因，這似乎並沒有與內聯：/ – IamFace

如何垂直對齊絕對位置在彼此頂部的一個div？

回答

相關問題