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

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

Barbara Streisand

リリース： 2024-10-25 22:25:05

オリジナル

711 人が閲覧しました

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 サイトの他の関連記事を参照してください。