Tidak boleh memusatkan teks menggunakan CSS + HTML

Question

Saya cuba memusatkan teks menggunakan CSS dan HTML. Saya sangat baru dalam pembangunan web jadi saya baru bermula. Saya menonton kursus asas (membuat halaman pertama) dan kini saya sedang mengerjakan projek saya sendiri (halaman lain)

* {
  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>

Tetapi, ia tidak akan berpusat langsung! Saya menghabiskan berjam-jam menelitinya jadi saya akhirnya datang ke sini untuk meminta bantuan. Saya telah melampirkan imej yang kelihatan seperti:

Apa yang saya mahukan ialah ia muncul di tengah) - sekurang-kurangnya secara mendatar! Bagaimanakah saya harus mencapai ini (perhatikan bahawa bahagian ini adalah bahagian dua)? Terima kasih.

Answer 1

1. Anda 部分 中的填充不均匀。您需要提供统一的值，例如 padding: 5rem 0; supaya keseluruhan bahagian sama rata

2. Anda berada di .our-news 中使用了 grid-template-columns: 1fr 1fr yang memberitahu bahawa akan ada 2 lajur di dalam bekas, mengambil ruang yang sama. Jadi anda perlu menukar baris ini kepada:

   grid-模板列：1fr;

3. Anda memberikan heading-secondary margin bawah. Padamkan baris supaya tiada ruang yang tidak diingini di bawah teks.

Kod diubah suai:

* {
  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: 5rem 0;
}

.our-news {
  max-width: 130rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 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;
}

      

        

          Why buy through us?