Stack flex Elemente übereinander

Question

Wie kann ich einfach die h3 Tag und Tag auf separaten Zeilen anzeigen, mit dem h3 Tag auf der Oberseite?

Dieser Code ist Teil eines größeren Projekts und ich weiß, dass es andere Möglichkeiten gibt, Elemente in der Mitte auf separaten Zeilen zu positionieren, aber ich möchte seine übergeordneten Elemente (des größeren Projekts) nicht beeinflussen und wollen eine einfachere Flexbox verwenden.

.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 hinzufügen in Spalte flex Produkte zu platzieren. Beachten Sie, dass align-items in diesem Fall die Flex-Elemente horizontal zentriert. Um Elemente in die Mitte des Flex-Containers zu verschieben, verwenden Sie 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

bearbeitet Ijust die snippent. Löschen Sie einfach die Anweisung aus ".hover-over-windows-style". Dann wird es funktionieren.

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