兒童的div裏面父格不是垂直對齊

Question

我試圖讓白色孩子的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和白空間，使得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>

Answer 2

您可以刪除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>

柔性也可以讓這個更易於管理：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>

如果是居中白框裏面的內容，柔性可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>