用flexbox居中打破一條線？

Question

我試圖垂直/水平居中我的標題與直接在它下面的字幕。這裏是我的嘗試：

html, body, h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
}

<div id="container"> 
 
    <h1>Main Title</h1> 
 
    <span>Subtitle</span> 
 
</div>

正如你所看到的字幕是在同一行h1，我試圖讓它走在它下面。我已經嘗試將h1設置爲display: block;，但在container上使用display: flex時似乎不起作用。任何幫助，將不勝感激。

Answer 1

集flex-direction: column上container

html, body, h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
}

<div id="container"> 
 
    <h1>Main Title</h1> 
 
    <span>Subtitle</span> 
 
</div>

Answer 2

設置flex-direction到column是一個解決方案。它已經在另一個答案中提供了。

在某些情況下，如果flex-direction: row是首選（或必需），則可以將flex-wrap: wrap添加到容器，併爲第一個項目指定100％的寬度，這將強制第二個項目到下一行。

body, h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    flex-wrap: wrap;   /* NEW */ 
 
    align-content: center;  /* NEW */ 
 
    text-align: center;  /* NEW */ 
 
} 
 

 
h1 { flex: 0 0 100%; }  /* NEW */

<div id="container"> 
 
    <h1>Main Title</h1> 
 
    <span>Subtitle</span> 
 
</div>