0

そのため、親 div の高さをその最大の子の高さと同じにする方法を見つけようとしながら、すべての子を同じ最大の高さにし、画像を含む可能性のあるすべての子に水平垂直中心を強制する方法を探し回っています。つまり、2 列 1 行のテーブルを使用し、align と valign を中央に設定した結果です。

次の html の場合、

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

すべての子を同じ (最大) 高さにするための css は、親を展開して子データを非表示にしないようにしながら、各列のコンテンツの中央揃えが可能です...?

最初にこれを使用しようとしましたが、各列が最大の高さに正しく拡張されなかったため、各子のコンテンツの垂直方向の中央揃えが妨げられました。

overflow: overlay;またはcss プロパティを使用することを提案する人もoverflow:auto;いましたが、これによりどこにでもスクロールバーが生成されました。

どんな助けでも素晴らしいだろう...テーブルは今本当によく見えます...

4

1 に答える 1

2

試しました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;
}

2つの柱は隣り合っており.inner、この状況では、高さは最も高い柱によって決定されます.col1。チェックしてください：デモ

于 2013-03-15T08:39:51.793 に答える