垂直对齐的 Flex 项目未正确对齐答案

【问题标题】：Vertically Aligned Flex Items not Aligning Correctly垂直对齐的 Flex 项目未正确对齐
【发布时间】：2018-06-06 10:28:25
【问题描述】：

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

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

我已将 h1 标题放大以突出问题。

Codepen: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>

【问题讨论】：

如果您谈论的是元素周围的空间，那么这就是margin。如果您不想要，请将 h1 的 css 设置为 margin: 0;
这将是元素上默认设置的额外填充或边距。你可以试试 "h1,h3,p{ padding:0; margin:0; }"
试试.inner > * { margin: 0 auto; } ... codepen.io/anon/pen/MrbGvW

标签： html css flexbox alignment

【解决方案1】：

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

给他们一个相等的上/下边距，例如

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

堆栈sn-p

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

【讨论】：