父div内的子div没有垂直对齐

Question

我正在尝试让白孩子div在红色父div的中心垂直对齐（同时确保红色div在祖父母粉红色div的中心保持对齐）。

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

没有使用弹性盒，是否有更简单的方法来实现这一目标？ 感谢您的协助。

 .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并使用vertical-align 。 （ float覆盖inline-block显示）

最终将text-align-last以证明框是否正确

 .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; padding: 0 5%; background: #f00; margin: 0 auto; text-align: center; text-align-last: justify; } .home-summary { display: inline-block; vertical-align: middle; width: 26%; background: #fff; } .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> 

flex还可以使它更易于管理： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

 .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; /* added flex */ display:flex; align-items:center; justify-content:space-around } .home-summary { /* reduced to minimal */ width: 26%; background: #fff; } .no-padding-or-margin { margin: 0; padding: 0; } .clear { display:none; /* or remove from html when using flex */; } 

 <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> 

如果要将内容放在白框内，则可以选择flex：

 .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; /* added flex */ display: flex; justify-content: space-around } .home-summary { /* reduced to minimal */ width: 26%; background: #fff; display: flex; justify-content: center; flex-flow: column } .no-padding-or-margin { margin: 0; padding: 0; } .clear { display: none; } 

 <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 2

删除元素之间的float和空白，使width: 26%; margin-right: 11% 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>