html - 父 div 内的子 div 未垂直对齐

Question

我试图让白色子 div 在红色父 div 的中心垂直对齐(同时确保红色 div 在祖父粉色 div 的中心保持对齐)。

我试过将红色父 div 显示为表格单元格，但这将红色 div 移到了祖父粉色 div 的左侧，并且无论如何都没有垂直对齐 div。还尝试了不同类型的定位。

有没有不使用 flex boxes 的更简单的方法来实现这一点？感谢您的帮助。

.sections-stretched {
    width: 100%;
    height: auto;
    background: #f0f;
    margin: 0 auto 50px auto;
    overflow: auto;
    padding: 50px 0;
}

.stretched-container {
    max-width: 960px;
    height: auto;
    background: #f00;
    margin: 0 auto;
    text-align: center;
}

.home-summary {
    width: 26%;
    height: auto;
    background: #fff;
    margin-right: 11%;
    display: inline-block;
    float: left;
}

.no-padding-or-margin {
    margin: 0;
    padding: 0;
}

.clear{ clear: both; }

    <section class="sections-stretched">
        <div class="stretched-container">
            <div class="home-summary">
                <h4>eirh erergerge ergergiuerhgier</h4>
                <p>ergergerg erg ergerg ergergergegeg erg ergerg ergergergegeg, etc</p>
            </div>
            <div class="home-summary">
                text here lorem imsup cla bla bla bla bla bla bla blal bla blw bowrnbuehrbuehr beurohertext here lorem imsup cla bla bla bla bla bla bla blal bla blw bowrnbuehrbuehr beuroher
            </div>
            <div class="home-summary no-padding-or-margin">
                text here lorem imsup cla bla
            </div>
            <div class="clear"></div>
        </div>
    </section>

Answer 1

删除元素之间的 float 和空格，这样 width: 26%; margin-right: 11% 将占用父级的 100%，并使用 vertical-align: middle;

.sections-stretched {
    width: 100%;
    height: auto;
    background: #f0f;
    margin: 0 auto 50px auto;
    overflow: auto;
    padding: 50px 0;
}

.stretched-container {
    max-width: 960px;
    height: auto;
    background: #f00;
    margin: 0 auto;
    text-align: center;
}

.home-summary {
    width: 26%;
    height: auto;
    background: #fff;
    margin-right: 11%;
    display: inline-block;
    vertical-align: middle;
}

.no-padding-or-margin {
    margin: 0;
    padding: 0;
}

.clear{ clear: both; }

<section class="sections-stretched">
        <div class="stretched-container">
            <div class="home-summary">
                <h4>eirh erergerge ergergiuerhgier</h4>
                <p>ergergerg erg ergerg ergergergegeg erg ergerg ergergergegeg, etc</p>
            </div><div class="home-summary">
                text here lorem imsup cla bla bla bla bla bla bla blal bla blw bowrnbuehrbuehr beurohertext here lorem imsup cla bla bla bla bla bla bla blal bla blw bowrnbuehrbuehr beuroher
            </div><div class="home-summary no-padding-or-margin">
                text here lorem imsup cla bla
            </div>
            <div class="clear"></div>
        </div>
    </section>