html - 基础 6 - flex 盒子中的行对齐

Question

我试图将两个 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 都出现在同一行上。

谢谢你的帮助!

Answer 1

很确定您必须将类列添加到行的子元素中，如下所示:

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>