我正在嘗試使用 CSS 和 HTML 使文字居中。我對網頁開發非常陌生,所以才剛開始。我觀看了基礎知識課程(製作了第一頁),現在我正在開發自己的專案(其他頁面)
* { padding: 0; margin: 0; box-sizing: border-box; } html { /* font-size: 10px; */ font-size: 62.5% } body { font-family: "Rubik", sans-serif; line-height: 1; font-weight: 400; color: #FFFFFF; } .second-page { background-color: #04041af9; padding: 4.8rem 0 9.6rem 0; } .our-news { max-width: 130rem; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 9.6rem; align-items: center; } .heading-secondary { font-size: 5.2rem; font-weight: 700; /*line-height: 1.05;*/ align-items: center; text-align: center; color: #FFFFFF; letter-spacing: -0.5px; margin-bottom: 3.2rem; }
<section class="second-page"> <div class="our-news"> <h1 class="heading-secondary"> Why buy through us? </h1> </div> </section>
但是,它根本不會居中!我花了幾個小時研究它,所以我終於來這裡尋求幫助。我附上了它的外觀圖像:
我想要的只是讓它出現在中央)——至少水平方向! 我應該如何實現這一目標(請注意,該部分是第二部分)?謝謝。
您的
部分
中的填充不均勻。您需要提供統一的值,例如padding: 5rem 0;
以便整個部分的間距均勻您在
.our-news
中使用了grid-template-columns: 1fr 1fr
,它告訴容器內將有 2 列,佔用相同的空間。所以你需要將此行更改為:grid-範本列:1fr;
您為
heading-secondary
提供了邊距底部。刪除該行,以便文字下方不會有任何不需要的空格。修改後的程式碼: