Richten Sie den Text zentriert aus, ohne ihn umzubrechen

Question

Ich habe versucht, meinen Titel zu zentrieren, also habe ich white-space: nowrap; verwendet, damit er nicht gestapelt wurde und in einer Zeile erschien, aber jetzt wird er nicht zentriert. Sie haben also den CSS-Code für den Titel und er sieht großartig aus. Das einzige Problem besteht darin, dass er nicht zentriert ist, sondern in der Mitte beginnt und sich ganz nach rechts bewegt. Es heißt also nicht „Treffen Sie den Entdecker“, sondern „Treffen Sie den Entdecker“

Mein Codeausschnitt ist:

.section-title {
  font-size: 4rem;
  font-weight: 300;
  color: black;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  clear: both;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  justify-content: center;
}

<div class="about-top">
  <h1 class="section-title">Meet the <span>SEE</span>kers</h1>
  <p>We are a team of young entrepreneurs, who decided it was time to modernize the way we search the web. A diverse group of unexpected talents came together to make SEE-Tool available to every web user.</p>
</div>

Answer 1

我不确定为什么你的代码中有 justify-content: center ，因为它在那里没有做任何事情。您也不需要 inline-block 因为 span 标签不是块元素。

您可以删除 display 属性并添加 text-align: center，这样它将居中您的 h1 标记。

.section-title {
  font-size: 4rem;
  font-weight: 300;
  color: black;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  text-align: center;
}

  
Meet the SEEkers
  
We are a team of young entrepreneurs, who decided it was time to modernize the way we search the web. A diverse group of unexpected talents came together to make SEE-Tool available to every web user.