我在将一行文字移动到另一行下方时遇到麻烦。我觉得它与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: row
和flex-wrap: nowrap
。这意味着弹性项目将在一行上水平对齐,这是您面临的问题。
为了更改此行为,您可以更改
flex-direction
或允许弹性项目包装。