將P標簽放置在H1下方的問題

Question

我在多個站點都遇到過此問題，但從未解決過。 問題是，我在容器中有一個h1標簽，該標簽使用align-items垂直對齊。 在該h1以下，我想放置ap標簽。 這可能是一個簡單的解決方法，但我從未能夠解決此問題。

我嘗試使用line-height而不是align-items或為p標簽創建一個新容器，我還嘗試從h1刪除底部邊距，從p標簽刪除頂部邊距，但是沒有任何效果。 這里有什么解決方案？

 .headertext { font-family: 'Montserrat', sans-serif; display: flex; justify-content: center; align-items: center; flex: 1; font-size: 4rem; } .header { background-image: url('1080background.png'); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; width: 100vw; height: 100vh; display: flex; justify-content: center; } h1 { margin-bottom: 0; padding-bottom: 0; display: inline; } p { margin-top: 0; padding-top: 0; font-size: 2rem; } 

 <div class="header"> <div class="headertext"> <h1>Jude Wallach</h1> <p>Test</p> </div> </div> 

網站謝謝。

Answer 1

在解決方案上，添加flex-flow: column; 到您的.headertext類

Answer 2

只需在您的中添加flex-direction: column即可. headertext . headertext CSS。 默認的flex在水平flex-direction: column上將flex項目水平對齊，在flex-direction: column垂直對齊。

順便說一句： display: inline在h1上display: inline並不是真的有幫助-只需重新設置即可