将弹性项目彼此堆叠

Question

如何简单地将h3标签和p标签显示在单独的行中，h3标签在顶部？

这段代码是一个较大项目的一部分，我知道还有其他方法可以将元素居中放置在单独的行上，但是我不想影响它（较大项目的父元素）并希望使用一个更简单的方法弹性盒。

.hover-over-windows-style {
  height: 100%;
  background: red;
  /* Fails because h3 and p tags are not on separate lines */
  display: flex;
  align-items: center;
  /* padding-top of 25% nearly works but content isnt in centre of parent div */
}

#parent {
  height: 300px;
  width: 300px;
}

<div id="parent">
  <div class="hover-over-windows-style">
    <h3><a href="matches/blitz.html">H3 Tag on top</a></h3>
    <p>Paragraph here should be below the H3 tag, on a separate line. Not sure how to get this done. Setting 100% widths don't work and cannot display as block elements.</p>
  </div>
</div>

Answer 1

添加flex-direction: column以将弹性项目放置在列中。请注意，align-items在这种情况下，可将flex项目水平居中。要将元素移动到flex容器的中心，请使用justify-content: center。

.hover-over-windows-style {
  height: 100%;
  background: red;
  /* Fails because h3 and p tags are not on separate lines */
  display: flex;
  /* place flex items in column */
  flex-direction: column;
  /* move elements to the center of flex center */
  justify-content: center;
  /* padding-top of 25% nearly works but content isnt in centre of parent div */
}

#parent {
  height: 300px;
  width: 300px;
}

<div id="parent">
  <div class="hover-over-windows-style">
    <h3><a href="matches/blitz.html">H3 Tag on top</a></h3>
    <p>Paragraph here should be below the H3 tag, on a separate line. Not sure how to get this done. Setting 100% widths don't work and cannot display as block elements.</p>
  </div>
</div>