제공된 콘텐츠에 맞는 몇 가지 제목 옵션은 다음과 같습니다. 옵션 1(도전에 집중): 추가 HTML 없이 양쪽에 수평선이 있는 제목을 가운데에 맞추는 방법은 무엇입니까? 옵션 2(Solu에 집중)-CSS 튜토리얼-php.cn

제공된 콘텐츠에 맞는 몇 가지 제목 옵션은 다음과 같습니다. 옵션 1(도전에 집중): 추가 HTML 없이 양쪽에 수평선이 있는 제목을 가운데에 맞추는 방법은 무엇입니까? 옵션 2(Solu에 집중)

Barbara Streisand

풀어 주다： 2024-10-25 22:25:05

원래의

628명이 탐색했습니다.

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(Solu에 집중)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!