我试图将两个 div 水平居中,并将一个对齐到父容器的中间,第二个对齐到父容器的底部。我使用的是带有 Flexbox 版本的 Foundation 6。
HTML
<section id="hero">
<div class="row align-middle align-center">
<h1>Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p>Some text</p>
</div>
</section>
CSS
#hero {
height: 100vh;
display: flex;
flex-wrap: wrap;
}
问题是 flex 容器 (#hero) 中的每个 div 都出现在同一行上。
谢谢你的帮助!
最佳答案
很确定您必须将类列添加到行的子元素中,如下所示:
id="hero">
<div class="row align-middle align-center">
<h1 class="column">Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p class="column">Some text</p>
</div>
</section>
关于html - 基础 6 - flex 盒子中的行对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43099227/