父div中的子div不是垂直对齐的

时间：2017-07-28 18:48:08

标签： html css

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

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

是否有更简单的方法可以在不使用柔性盒的情况下实现这一目标？感谢您的帮助。

＆＃13;
＆＃13; 
.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; }
＆＃13; 
    <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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：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>

相关问题
最新问题