我在将一行文字移动到另一行下方时遇到麻烦。我觉得它与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;
}

最佳答案

在父容器中添加一行:

#section1 { flex-direction: column; }


要么

#section1 { flex-wrap: wrap; }


创建Flex容器时(通过在元素上声明display: flex),一些默认规则将生效。这些规则中的两个是flex-direction: rowflex-wrap: nowrap

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

为了更改此行为,您可以更改flex-direction或允许弹性项目包装。

10-05 21:00
查看更多