html - 垂直对齐的 Flex 元素未正确对齐

Question

我有一些嵌套元素设置了“display: flex”，内部 div 设置了“flex-direction: column”，因此它的子元素垂直堆叠。

我如何才能让红色内部 div 中的所有内容都正确垂直居中，这些 flex 元素是不同的 HTML 元素类型，而它们并没有这样做？如果您从下面的示例中看到，H1 标题上方的空间明显大于底部 anchor 链接下方的空间，但内部 div 的每一侧都有 1rem 的标准填充值，我遵循 w3 规范。

我将 h1 标题放大以突出显示该问题。

代码笔:https://codepen.io/emilychews/pen/VymXKY

CSS

#section-1 {
 display: flex;
 margin: 0 auto; 
 width: 100%; height: 500px;
 background-color: blue; 
 box-sizing: border-box;}

#row-1 {
 display:flex;
 justify-content: center;
 margin: auto;
 padding: 1rem;
 background-color: red;
 width: 70%;
 max-width: 1043px;
 box-sizing: border-box;
 }

#row-1 .inner {
 display: flex;
 flex-direction: column;
 justify-content: center;
 box-sizing: border-box;
 padding: 1rem; 
}

#row-1 .inner h1, #row-1 .inner h3, #row-1 .inner p {
color: white; text-align: center;
}
#row-1 .inner hr {border:0; background:white; width: 75px; height: 5px;}
.inner h1 {font-size: 40px;}

HTML

<section id="section-1">
  <div id="row-1">
    <div class="inner" >
      <h1>SOME WORDS TO MAKE A TITLE</h1>
      <h3>My subheading. Your subheading.</h3>
      <p>A random sentance about something or other.<br />
        Another random sentance about something or other.</p>
      <hr>
      <p><a href="#">LEARN MORE</a></p>
    </div>
  </div>
</section>

Answer 1

h1、p 和 hr 等元素具有预定义的边距，并且由于它们不相同，所以您会得到描述的结果/显示。

给他们一个相等的顶部/底部边距，例如

.inner > * {
  margin: 10px auto;
}

堆栈片段

#section-1 {
  display: flex;
  margin: 0 auto;
  width: 100%;
  height: 500px;
  background-color: blue;
  box-sizing: border-box;
}

#row-1 {
  display: flex;
  justify-content: center;
  margin: auto;
  padding: 1rem;
  background-color: red;
  width: 70%;
  max-width: 1043px;
  box-sizing: border-box;
}

#row-1 .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 1rem;
}

#row-1 .inner h1 {
  color: white;
  text-align: center;
  margin-top: 0;
  padding: 0;
}

#row-1 .inner h3 {
  color: white;
  text-align: center;
}

#row-1 .inner p {
  color: white;
  text-align: center;
}

#row-1 .inner p a {
  color: white;
  text-align: center;
  margin: 0;
  padding;
  0;
}

#row-1 .inner hr {
  border: 0;
  background: white;
  width: 75px;
  height: 5px;
}

.inner h1 {
  font-size: 40px;
}

.inner > * {
  margin: 10px auto;                  /*  added  */
}

<section id="section-1">
  <div id="row-1">
    <div class="inner">
      <h1>SOME WORDS TO MAKE A TITLE</h1>
      <h3>My subheading. Your subheading.</h3>
      <p>A random sentance about something or other.<br /> Another random sentance about something or other.</p>
      <hr>
      <p id="lowerlink"><a href="#">LEARN MORE</a></p>
    </div>
  </div>
</section>