Question

所以我一直在寻找如何使父div的高度等于其最大的孩子的高度，同时使孩子们具有相同的最大高度并在所有孩子身上强制执行水平垂直中心，这可能是包含图像。简而言之，使用具有两列和一行的表的结果，其中align和valign设置为居中。

对于以下html，

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

用于使所有孩子具有相同（最大）高度的css，以便在扩展父级以包含且不隐藏其子数据时可以使每列内容居中...？

最初我尝试使用this，但它没有正确地将每列扩展到最大高度，从而阻止了每个孩子的内容所需的垂直居中。

有些人还建议使用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

保持div父高度与子div内容水平居中

1 个答案: