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

​

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>

​

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>

​