如何将一行文字移到另一个下方？

Question

I am having trouble moving one line of text below another. I have a feeling its something to do with the flexbox vertical align. I have also tried using display: block but to no avail. Please help, thank you.

The problem is the first section here: 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

Add one line to the parent container:

#section1 { flex-direction: column; }

OR

#section1 { flex-wrap: wrap; }

When you create a flex container (by declaring display: flex on an element), several default rules go into effect. Two of these rules are flex-direction: row and flex-wrap: nowrap .

This means that flex items will align horizontally on a single line, which is the issue you are facing.

In order to alter this behavior, you could change the flex-direction or allow flex items to wrap.