テキストを折り返さずに中央揃えにする

Question

タイトルを中央に配置しようとして、スタックせず 1 行に表示されるように white-space:nowrap; を使用しましたが、今度は中央に配置されません。タイトルの CSS コードが完成しました。見た目は素晴らしく、唯一の問題は、中央に配置されるのではなく、中央から始まり右にずっと移動することです。まるで、「探検家に会う」ではなく、「探検家に会う」です

私のコードスニペットは次のとおりです:

.セクションタイトル {
  フォントサイズ: 4rem;
  フォントの太さ: 300;
  色: 黒;
  マージン-ボトム: 10px;
  テキスト変換: 大文字;
  文字間隔: 0.2rem;
  クリア：両方。
  表示: インラインブロック;
  オーバーフロー: 非表示;
  ホワイトスペース: ナラップ;
  コンテンツの位置揃え: 中央;
}

<div class="about-top">
  <h1 class="section-title"><span>SEE</span>ユーザーの紹介</h1>
  <p>私たちは、ウェブの検索方法を最新化する時期が来たと判断した若い起業家のチームです。あらゆるウェブ ユーザーが SEE-Tool を利用できるようにするために、予想外の才能を持つ多様なグループが集まりました。</p>
</div>

Answer 1

コード内に justify-content: center がある理由がわかりません。そこでは何も行われないためです。また、span タグはブロック要素ではないため、inline-block も必要ありません。

display 属性を削除し、text-align: center を追加すると、h1 タグが中央に配置されます。

.セクションタイトル {
  フォントサイズ: 4rem;
  フォントの太さ: 300;
  色: 黒;
  マージン-ボトム: 10px;
  テキスト変換: 大文字;
  文字間隔: 0.2rem;
  テキスト整列: 中央;
}

  
SEEkersを紹介します
  
私たちは若い起業家のチームで、Web の検索方法を最新化する時期が来たと判断しました。SEE-Tool をすべての Web ユーザーが利用できるようにするために、予想外の才能を持つ多様なグループが集まりました。