将弹性物品堆叠在一起

如何在单独的行上简单显示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

将弹性物品堆叠在一起

回答

相关问题