Flexbox를 사용하여 수평선 내에서 텍스트를 가운데에 배치하려면 어떻게 해야 합니까?

가로줄자 중앙에 가운데 맞춤 텍스트 추가

원래 질문은 xhtml 1.0 strict에서 가로줄을 사용하여 텍스트를 분리하는 방법을 제시했습니다. . 그러나 제공된 방법은 정렬 문제를 보여 우아한 솔루션에 대한 요청을 촉발했습니다.

답변에서는 Flexbox를 이 문제 해결의 핵심으로 소개합니다. 제공된 코드에 대한 분석은 다음과 같습니다.

• .separator { ... }는 기본 요소의 스타일을 정의합니다.
• display: flex; 플렉스 컨테이너로 설정합니다.
• align-items: center; Flexbox 내의 항목이 수직으로 중앙에 위치하도록 합니다.
• text-align: center; 텍스트 내용을 중앙에 배치합니다.

가로 눈금자를 만들기 위해 다음 스타일이 적용됩니다.

• .separator::before, .separator::after { ... }는 콘텐츠 전후의 의사 요소를 대상으로 합니다.
• content: ''; 의사 요소에서 모든 콘텐츠를 제거합니다.
• flex: 1; 사용 가능한 공간을 동일하게 차지하도록 합니다.
• border-bottom: 1px solid #000; 원하는 선 효과를 만듭니다.

텍스트 주위에 공백을 추가하기 위해 다음 스타일이 적용됩니다.

• .separator:not(:empty)::before { . .. } 및 .separator:not(:empty)::after { ... } 텍스트가 있는 경우에만 의사 요소를 대상으로 합니다. content.
• margin-right 및 margin-left는 텍스트의 왼쪽과 오른쪽에 여백을 추가하여 가로 규칙과 구분됩니다.

HTML 코드는 이 사용 방법을 보여줍니다. 스타일:

• 텍스트를 .separator로 묶습니다. 요소.

이 솔루션은 Flexbox의 고급 레이아웃 기능을 활용하여 쉽고 우아하게 가운데 정렬된 텍스트와 가로 규칙을 구현합니다.

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