Question

如何在单独的行中显示h3代码和p代码，并在顶部添加h3代码？

此代码是更大项目的一部分，我知道还有其他方法可以将元素放在中心的不同行中，但我不想影响其父元素（更大的项目）和想要使用更简单的弹性盒。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

Ijust编辑了片段。只需从“.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>

将Flex项目叠加在一起

2 个答案: