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

Question

I'm trying to get the white child divs to align vertically in the centre of the red parent div (while ensuring the red div stays aligned in the centre of the grandparent pink div).

I've tried displaying the red parent div to be a table cell but this shifted the red div to the left of the grandparent pink div and didn't align the vertically divs anyway. Also tried different types of positioning.

Is there an easier way of achieving this without the use of flex boxes? Thanks for any assistance.

 .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

You may remove float and use vertical-align . ( float override inline-block display)

eventually text-align-last to justify the 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; 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 can also make this easier to manage : 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> 

If it is to center content inside the white boxes, flex can be inbricated :

 .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

Remove the float and white-space between the elements so that width: 26%; margin-right: 11% width: 26%; margin-right: 11% will consume 100% of the parent, and use 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>