我正在尝试将两个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都显示在同一行上。
谢谢你的帮助!
最佳答案
非常确定您必须将class列添加到row的sub元素中,如下所示:
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>