水平罫線の間でテキストを中央に配置するにはどうすればよいですか?

水平罫線内でテキストを中央揃えにする

中央揃えのテキストの両側に水平線を作成するために、さまざまな解決策が提案されていますが、それぞれに独自の制限があります。

一般的なアプローチの 1 つは、複数の

<div> を使用することです。要素とフローティング:

<div>

ただし、このアプローチでは位置合わせの問題が発生する可能性があります。同様に、テーブルを使用すると位置ずれが発生する可能性があります:

<table><tr>
  <td>

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>

このアプローチにより、正確な位置合わせが可能になり、調整の必要がなくなります複雑なマークアップまたは「曖昧な」ソリューションの場合。