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 요소는 상대적으로 수평적으로 중앙에 위치합니다.
• 두 개의 의사 요소(:before 및 :after)를 사용하여 양쪽에 수평선을 만듭니다.
• 선은 절대적으로 위치합니다. , 상단에서 51%, 제목 너비의 절반으로 설정합니다.
• 텍스트 주변에 투명한 영역을 만들기 위해 h1 요소의 오버플로 속성을 숨김으로 설정합니다.
• 텍스트와 겹칠 때 선이 숨겨지도록 내용에 줄바꿈 없는 공백(a0)이 제공됩니다.
• 빨간색 배경색을 사용하면 시연용으로 선을 쉽게 볼 수 있습니다. 원하는 스타일에 맞게 조정하세요.

이 솔루션은 추가 HTML 요소를 도입하지 않고도 제목을 효과적으로 중앙에 배치하고 원하는 가로선을 만듭니다.

위 내용은 CSS를 사용하여 양쪽에 수평선이 있는 제목을 가운데에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!