Question

我无法将一行文字移到另一行下面。我感觉它与flexbox垂直对齐有关。我也试过使用display: block，但无济于事。请帮忙，谢谢。

问题是这里的第一部分： https://jsfiddle.net/sqeeux47/

HTML

<section id="section1">
    <h1 id="section1heading">Welcome to our multicultural society.</h1>
    <h4 id="section1paragraph">Come worship with us.</h4>
</section>

CSS

#section1 {
    background-image: url(" http://i300.photobucket.com/...");
    background-repeat:no-repeat;
    background-size:100%;
    background-position:center;
    width:100%;
    height:606px;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
}

Answer 1

在父容器中添加一行：

#section1 { flex-direction: column; }

OR

#section1 { flex-wrap: wrap; }

创建Flex容器时（通过在元素上声明display: flex），几个默认规则生效。其中两条规则是flex-direction: row和flex-wrap: nowrap。

这意味着弹性项目将在一条线上水平对齐，这是您面临的问题。

为了改变这种行为，您可以更改flex-direction或允许弹性项目换行。

如何在另一个下面移动文本行？

1 个答案: