両側に水平線のある見出し

考えられる解決策

ホームページ

ウェブフロントエンド

CSSチュートリアル

提供したコンテンツに適したタイトルのオプションをいくつか示します。オプション 1 (挑戦に焦点を当てる): 余分な HTML を使用せずに、両側に水平線を入れて見出しを中央に配置する方法オプション 2 (ソリューションに焦点を当てる)

提供したコンテンツに適したタイトルのオプションをいくつか示します。オプション 1 (挑戦に焦点を当てる): 余分な HTML を使用せずに、両側に水平線を入れて見出しを中央に配置する方法オプション 2 (ソリューションに焦点を当てる)

Oct 25, 2024 pm 10:25 PM

Here are a few title options that fit your provided content:

Option 1 (Focus on Challenge):
How to Center a Heading with Horizontal Lines on Either Side Without Extra HTML?

Option 2 (Focus on Solution):
Centering Headings with Lines: A CSS-Only Trick

両側に水平線のある見出し

この質問では、両側に垂直方向の中央に水平線を配置したページタイトル (見出し) を作成するという課題について説明します。目標は、余分な HTML を追加せずに、ページ上の背景画像を考慮しながらこの効果を実現することです。

考えられる解決策

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

ログイン後にコピー

HTML:

以上が提供したコンテンツに適したタイトルのオプションをいくつか示します。オプション 1 (挑戦に焦点を当てる): 余分な HTML を使用せずに、両側に水平線を入れて見出しを中央に配置する方法オプション 2 (ソリューションに焦点を当てる)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。