我正在尝试将两个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>

10-05 20:54
查看更多