如何将文本行移动到另一行下方？

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; }

或

#section1 { flex-wrap: wrap; }

当您创建弹性容器时（通过在元素上声明 display: flex），一些默认规则会生效。其中两个规则是 flex-direction: row 和 flex-wrap: nowrap.

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

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

如何将文本行移动到另一行下方？

How to move line of text below another?

html

css

flexbox