Stack flex items on top of each other

user3760941

How can I simply display the h3 tag and p tag on separate lines, with the h3 tag on the top?

This code is part of a bigger project and I know there are other ways of positioning elements in the centre on separate lines, but I don't want to have to affect its parent elements (of the bigger project) and want to use a simpler flex box.

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

Vadim Ovchinnikov

Add flex-direction: column to place flex items in column. Note that align-items will center flex items horizontally in this case. To move elements to the center of flex container use 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>

Collected from the Internet

Please contact [email protected] to delete if infringement.