將文字置中對齊，不換行

Question

我試圖將我的標題居中，所以我使用了 white-space: nowrap; 所以它沒有堆疊並且出現在一行中，但現在它不會居中。這樣就有了標題的 CSS 程式碼，它的外觀很好，唯一的問題是，它不是居中顯示，而是從中心開始，並且一直向右移動。就像，它不是“與探索者見面”，而是“與探索者見面”

我的程式碼片段是：

.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 webilableuser web/plt;
</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
#