保留div父母身高一起兒童div內容水平居中

所以我一直在四處搜尋，試圖弄清楚如何使父母div的高度等於其最大的孩子的高度，同時使孩子們所有相同的maimum高度，並強制執行所有兒童的水平垂直中心，可能包含圖像。簡而言之，使用具有兩列和一行的表的結果，其中align和valign被設置爲中心。保留div父母身高一起兒童div內容水平居中

對於以下的HTML，

<div class="outer"> 
    <div class="inner"> 
     <div class="col1"> 
     </div> 
     <div class="col2"> 
     </div> 
    </div> 
</div>

的CSS用於使所有的孩子相同的（最大）的高度，使得每個列的內容的定心，能夠同時擴大母體是包含和不隱藏它的孩子數據是...？

最初我嘗試使用this，但它沒有正確地將每列擴展到最大高度，從而阻止了每個孩子內容的垂直居中。

一些還建議使用overflow: overlay;或overflow:auto; css屬性，但是這產生了滾動條無處不在。

任何幫助將是巨大的......表正在尋找真正的好現在...

來源

2013-03-15 Luke

你可以做一個[jsfiddle]（http://jsfiddle.net）？ – soyuka 2013-03-15 08:35:40

@Ali爲我們製作了一個:) – Luke 2013-03-15 09:01:48

你試過display:inline-block;？

.col1,.col2 
{ 
    display:inline-block; 
    vertical-align:middle; 
    width:200px; 
    border-style:solid; 
} 
.inner 
{ 
    border-style:solid; 
    text-align:center; 
} 
.col1 
{ 
    height:300px; 

} 
.col2 
{ 
    height:200px; 
}

的兩列被對方身邊，和.inner高度將由最高柱決定，在這種情況下，.col1。看看：DEMO

來源

2013-03-15 08:39:51

如果我能夠伸手並握握你的手，我會這麼做！ 'display：inline-block;'比左右浮動容易得多，並允許父級擴展，同時保持垂直居中的能力！謝謝你，這太棒了！ – Luke 2013-03-15 09:01:05

保留div父母身高一起兒童div內容水平居中

回答

相關問題