Flexbox를 사용하여 HTML의 가로 규칙 내에서 텍스트를 가운데에 배치하려면 어떻게 해야 합니까?

가로 규칙에 가운데 맞춤 텍스트 추가

가로 규칙 내에 가운데 맞춤 텍스트를 추가하는 작업은 HTML에서 어려울 수 있습니다. 다양한 접근 방식이 제안되었지만 정렬이 잘못되거나 서투른 솔루션으로 이어지는 경우가 많습니다. Flexbox를 사용한 우아한 솔루션은 다음과 같습니다.

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

<div class="separator">Next section</div>

이 코드는 텍스트가 가운데 정렬된 유연한 컨테이너를 만듭니다. ::before 및 ::after 의사 요소는 가로 테두리를 형성하는 반면, :empty 선택기는 빈 컨테이너에 불필요한 여백을 방지합니다. 이 솔루션은 깔끔한 정렬과 분리기 스타일의 간편한 사용자 정의를 제공합니다.

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