CSS를 사용하여 HTML의 가로 구분선에 가운데 맞춤 텍스트를 추가하는 방법은 무엇입니까?

Originally posted here!

HTML의 구분선에 가운데 맞춤 텍스트를 추가하려면 CSS flexbox를 사용하여 이를 달성할 수 있습니다.

TL; DR

HTML

<div>Hello world!</div>

CSS

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

/* To show the lines on right 
and left sides of the text */
.divider::after,
.divider::before {
  content: "";
  border: 1px solid black;
  flex: 1;
}

/* Space on left and right sides of text */
.divider:not(:empty)::before {
  margin-right: 0.25em;
}

.divider:not(:empty)::after {
  margin-left: 0.25em;
}

먼저 <div> HTML 태그를 만들고 태그 내부의 구분선 중앙에 표시해야 할 내용을 다음과 같이 넣습니다.

<div>Hello world!</div>

이제 CSS에서 참조할 수 있도록 class에 div 이름을 추가해 보겠습니다. 이렇게 할 수 있습니다.

<div class="divider">Hello world!</div>

이제 div를 flex 요소로 변환해야 합니다. 다음과 같이 할 수 있습니다.

.divider {
  display: flex;
}

이제 div 태그에 있는 모든 항목을 가로로 정렬해야 합니다. 이렇게 하려면 align-items flex 속성을 사용하고 해당 값을 center 로 설정할 수 있습니다. 이렇게 할 수 있습니다.

.divider {
  display: flex;
  align-items: center;
}

또한 text-align 속성을 사용하여 태그 내부의 텍스트를 정렬하고 값을 다음과 같이 center로 설정합니다.

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

지금까지는 div 태그에 대한 시각적 변경 사항이 없습니다.

이제 Hello world! 텍스트의 왼쪽과 오른쪽에 긴 줄을 만들기 위해 CSS에서 ::before 및 ::after 의사 요소를 사용할 수 있습니다.
1px 태그의 div 및 ::after 의사 요소 모두에 ::before 검정색 테두리를 적용해야 합니다. 또한 의사 요소에 flex: 1를 적용해야 합니다. 텍스트의 오른쪽과 왼쪽에 긴 줄이 생깁니다.

참고: flex: 1은 flex 속성을 설정하는 줄임말입니다. flex-grow : 1; , 플렉스 수축 : 1; 플렉스 기준 : 0; .

다음과 같이 할 수 있습니다.

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

/* To show the lines on right 
and left sides of the text */
.divider::after,
.divider::before {
  content: "";
  border: 1px solid black;
  flex: 1;
}

이제 우리는 다음과 같은 구분선을 가지고 있습니다.



그러나 자세히 보면 텍스트Hello world!의 오른쪽과 왼쪽에 공간이 많지 않습니다. 약간의 공간을 설정하기 위해 이 CSS를 추가할 수도 있습니다.

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

/* To show the lines on right 
and left sides of the text */
.divider::after,
.divider::before {
  content: "";
  border: 1px solid black;
  flex: 1;
}

/* Space on left and right sides of text */
.divider:not(:empty)::before {
  margin-right: 0.25em;
}

.divider:not(:empty)::after {
  margin-left: 0.25em;
}

이제 중앙에 텍스트가 있는 아름다운 가로 구분선이 생겼습니다! 예이! 🔥

JSBin에 있는 위의 코드를 참조하십시오.

이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.