Impossible de centrer le texte en utilisant CSS + HTML

Question

J'essaie de centrer le texte en utilisant CSS et HTML. Je suis très nouveau dans le développement Web, je ne fais donc que commencer. J'ai regardé le cours de base (fait la première page) et maintenant je travaille sur mon propre projet (autres pages)

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

Mais, il ne sera pas du tout centré ! J'ai passé des heures à faire des recherches alors je suis finalement venu ici pour demander de l'aide. J'ai joint une image de ce à quoi cela ressemble :

Tout ce que je veux, c'est qu'il apparaisse au centre) - au moins horizontalement ! Comment dois-je y parvenir (notez que cette partie est la deuxième) ? Merci.

Answer 1

1. Votre 部分 中的填充不均匀。您需要提供统一的值，例如 padding: 5rem 0; pour que toute la section soit uniformément espacée

2. Vous êtes en .our-news 中使用了 grid-template-columns: 1fr 1fr ce qui indique qu'il y aura 2 colonnes à l'intérieur du conteneur, occupant le même espace. Vous devez donc remplacer cette ligne par :

   grid-模板列：1fr;

3. Vous fournissez heading-secondary une marge en bas. Supprimez la ligne afin qu'il n'y ait aucun espace indésirable sous le texte.

Code modifié :

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