提供されたテキストに適合する質問ベースの記事のタイトルをいくつか示します。 * 両側に水平線のある中央揃えの見出し (背景なし) を作成するにはどうすればよいですか? * 横線を入れたい

背景なしで両側に水平線のある見出しを作成する方法

このシナリオでは、中央揃えのページ タイトルを作成する必要があります。背景色なしで両側に水平線。

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;
}

/*Optional for background color*/
.color {
    background-color: #ccc;
}

説明:

• h1 は text-align: center を使用して相対的に中央に配置されます。
• 前後の要素は :before と :after を使用して作成され、絶対的に上部 51% に配置されて垂直方向の中央に配置されます。
• 'a0' (非改行スペース) を含む content プロパティは、テキストがある場所で行を非表示にします。
• overflow: hidden により、行がテキストと重なりません。
• オプションで、必要に応じて、.color クラスを使用して背景色を追加できます。

注: このソリューションは、行の配置を手動で調整することなく、さまざまな長さのタイトルを処理できます。

以上が提供されたテキストに適合する質問ベースの記事のタイトルをいくつか示します。 * 両側に水平線のある中央揃えの見出し (背景なし) を作成するにはどうすればよいですか? * 横線を入れたいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。