가로 눈금자 사이에 텍스트를 가운데에 맞추려면 어떻게 해야 합니까?

가로 규칙 내에서 텍스트 가운데 맞추기

가운데에 있는 텍스트 옆에 가로선을 만들기 위해 다양한 솔루션이 제안되었지만 각각에는 고유한 한계가 있습니다.

일반적인 접근 방식 중 하나는 여러 <div> 요소를 플로팅합니다.

<div>

그러나 이 접근 방식은 정렬 문제를 일으킬 수 있습니다. 마찬가지로 테이블을 사용하면 정렬이 잘못될 수 있습니다.

<table><tr>
  <td>

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>

이 접근 방식은 정확한 정렬을 제공하고 필요가 없습니다. 복잡한 마크업 또는 "모호한" 솔루션의 경우.

위 내용은 가로 눈금자 사이에 텍스트를 가운데에 맞추려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!