将弹性项目堆叠在一起[重复]答案

【问题标题】：Stack flex items on top of each other [duplicate]将弹性项目堆叠在一起[重复]
【发布时间】：2017-08-10 00:11:15
【问题描述】：

我怎样才能简单地将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>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

添加flex-direction: column 以将弹性项目放置在列中。请注意，align-items 在这种情况下将水平居中弹性项目。要将元素移动到 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>

【讨论】：

【解决方案2】：

我刚刚编辑了该片段。只需从“.hover-over-windows-style”中删除该语句。然后就可以了。

.hover-over-windows-style {
  height: 100%;
  background: red;
  /* Fails because h3 and p tags are not on separate lines */
  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>

【讨论】：