將彈性物品堆疊在一起

如何在單獨的行上簡單顯示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>

來源

2017-08-09 user3760941

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

來源

2017-08-09 08:52:59

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>

來源

2017-08-09 09:27:10

將彈性物品堆疊在一起

回答

相關問題