フレックスボックスを使用して水平罫線内でテキストを中央に配置するにはどうすればよいですか?

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

元々、この質問は、xhtml 1.0 strict の水平罫線を使用してテキストを分割する方法を提案しました。 。ただし、提供されたメソッドでは位置合わせの問題が発生したため、洗練されたソリューションが求められました。

その回答では、この問題を解決する鍵として 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 { . .. } および .separator:not(:empty)::after { ... } は、テキストがある場合にのみ擬似要素をターゲットにしますcontent.
• margin-right と margin-left は、テキストの左右にマージンを追加し、水平方向の罫線から分離します。

HTML コードは、これの使用方法を示しています。 style:

• はテキストを .separator で囲みます。

このソリューションは、Flexbox の高度なレイアウト機能を利用して、中央揃えのテキストと水平方向のルールを簡単かつエレガントに実現します。

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