CSS を使用して見出しを中央に配置し、両側に水平線を配置するにはどうすればよいですか?

CSS: 両側に水平線がある中央揃えの見出し

この課題では、垂直方向に水平線が中央に配置されたページ タイトル (見出し) を作成します。背景画像の透明度を維持しながら、両側を中心に配置します。

これに対処するには、次の解決策を検討してください。

<code class="css">h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}</code>

このコード内:

• h1 要素は相対的に水平方向の中央に配置されます。
• 2 つの疑似要素 (:before と :after) を使用して、両側に水平線が作成されます。
• 線は絶対的に配置されます。 、上から 51%、見出しの幅の半分に設定します。
• テキストの周囲に透明な領域を作成するには、h1 要素のオーバーフロー プロパティを非表示に設定します。
• テキストに重なったときに行が確実に非表示になるように、内容として非改行スペース (a0) が与えられています。
• 赤い背景色により、デモンストレーション目的で行が簡単に見えます。目的のスタイルに合わせて調整します。

このソリューションは、追加の HTML 要素を導入することなく、見出しを効果的に中央に配置し、目的の水平線を作成します。

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