フレックスアイテムを積み重ねてスタックする

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はフレックスアイテムを水平方向にセンタリングします。フレックスコンテナの中心に要素を移動するには、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>

Answer 2

Ijustはsnippentを編集しました。単に ".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>