Question

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

如何获取它，以便红色内部div中的所有内容都垂直居中，这些flex-items是不同的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>

Answer 1

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

给予他们所有相等的上/下边距，例如

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

Stack snippet

＆＃13;

#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  */
}

＆＃13;

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

＆＃13;

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

1 个答案: