保持div父高度與子div內容水平居中

Question

所以我一直在尋找如何使父div的高度等於其最大的孩子的高度，同時使孩子們具有相同的最大高度並在所有孩子身上強制執行水平垂直中心，這可能包含圖像。 簡而言之，使用具有兩列和一行的表的結果，其中align和valign設置為center。

對於以下html，

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

用於使所有子節點具有相同（最大）高度的css，以便在擴展父節點以包含且不隱藏其子數據時可以使每列內容居中...

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

有些人還建議使用overflow: overlay; 或overflow:auto; css屬性，但這到處產生滾動條。

任何幫助都會很棒......桌子看起來真的很好......

Answer 1

你試過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