Flexbox を使用して HTML の水平罫線内のテキストを中央に配置するにはどうすればよいですか?

水平罫線に中央揃えのテキストを追加する

水平罫線内に中央揃えのテキストを追加するタスクは、HTML では困難な場合があります。さまざまなアプローチが提案されていますが、多くの場合、位置ずれや不格好な解決策が生じます。 Flexbox を使用した洗練されたソリューションは次のとおりです。

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

<div class="separator">Next section</div>

このコードは、テキストが中央に配置されたフレキシブル コンテナを作成します。 ::before および ::after 疑似要素は水平方向の境界線を形成し、:empty セレクターは空のコンテナーに不要なマージンが生じるのを防ぎます。このソリューションは、きれいな配置とセパレーター スタイルの簡単なカスタマイズを提供します。

以上がFlexbox を使用して HTML の水平罫線内のテキストを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。