CSS를 사용하여 Div에서 텍스트를 세로로 중앙에 배치

Alice Dupont
2024년 7월 13일 토요일 오후 9:40:27
CSS

CSS를 사용하여 Div 내부의 텍스트를 수직 중앙에 배치

div 내에서 텍스트를 수직으로 정렬하는 것은 웹 디자인에서 일반적인 문제가 될 수 있습니다. 텍스트가 완벽하게 중앙에 위치하도록 하면 콘텐츠의 미학과 가독성이 향상될 수 있습니다.

이 기사에서는 CSS를 사용하여 div 내에서 텍스트를 세로로 가운데 정렬하는 다양한 방법을 살펴보겠습니다. 간단한 예부터 시작한 다음 다양한 브라우저와 장치 간의 호환성을 보장하기 위한 고급 기술을 자세히 살펴보겠습니다.

명령 설명
display: flex; Flexbox 레이아웃을 사용할 수 있도록 Flex 컨테이너를 정의합니다.
justify-content: center; Flex 컨테이너 내에서 Flex 항목을 가로 중앙에 배치합니다.
align-items: center; Flex 컨테이너 내에서 Flex 항목을 세로 중앙에 배치합니다.
display: grid; 그리드 레이아웃을 사용할 수 있도록 그리드 컨테이너를 정의합니다.
place-items: center; 그리드 컨테이너 내에서 항목을 가로 및 세로로 가운데에 배치합니다.
display: table; 요소를 테이블로 정의하여 테이블 레이아웃 속성을 적용할 수 있습니다.
display: table-cell; 요소를 테이블 셀로 정의하여 수직 정렬 속성을 활성화합니다.
vertical-align: middle; 테이블 셀 요소 내에서 콘텐츠를 세로 중앙에 배치합니다.
line-height: 170px; 텍스트를 세로 중앙에 배치하려면 줄 높이를 컨테이너 높이와 동일하게 설정합니다.

CSS를 사용하여 텍스트를 세로로 가운데 맞추는 기술

첫 번째 스크립트 예에서는 다음을 사용합니다. 플렉스 컨테이너를 정의합니다. 이를 통해 Flexbox 레이아웃 속성을 사용할 수 있습니다. 설정으로 그리고 , 텍스트를 가로 및 세로 중앙에 배치할 수 있습니다.

요소. 이 방법은 매우 효과적이고 구현이 간단하여 현대 웹 디자인에 널리 사용됩니다. Flexbox는 반응성과 정렬 용이성 측면에서 특히 유용합니다. 이를 통해 개발자는 다양한 화면 크기와 방향에 잘 적응하는 레이아웃을 만들 수 있습니다.

두 번째 스크립트 예제에서는 다음을 사용하여 CSS 그리드 레이아웃을 사용합니다. . 설정으로 , 텍스트는 그리드 컨테이너 내에서 수평 및 수직 중앙에 배치됩니다. CSS Grid는 기존 방법에 비해 웹 레이아웃 디자인을 위한 더욱 강력하고 유연한 시스템을 제공합니다. 복잡하고 반응이 빠른 디자인을 쉽게 만들 수 있는 기능을 제공합니다. 그만큼 명령은 수직 및 수평 중앙 정렬을 달성하는 간결한 방법으로, 코드를 단순화하고 가독성을 향상시킵니다.

수직 센터링을 위한 고급 CSS 기술

세 번째 스크립트에서는 테이블 표시 방법을 사용합니다. 환경 용기에 그리고 다음으로 생성된 의사 요소에 대해 우리가 vertical-align: middle; 재산. 이 방법은 표 셀의 동작을 모방하여 내용을 세로로 가운데에 배치할 수 있습니다. 이 접근 방식은 최신 웹 디자인에서는 덜 일반적으로 사용되지만 이전 브라우저와의 호환성을 유지하거나 레거시 코드를 처리할 때 유용할 수 있습니다. 최신 레이아웃 시스템에 의존하지 않고도 콘텐츠를 중앙에 배치하는 안정적인 방법을 제공합니다.

네 번째 스크립트 예제에서는 재산. 설정하여 컨테이너의 높이와 같으면 텍스트가 수직으로 중앙에 배치됩니다. 이 기술은 단일 행 텍스트에 간단하고 효과적입니다. 그러나 컨테이너의 높이가 변경될 수 있는 여러 줄의 텍스트나 동적 콘텐츠에는 적합하지 않을 수 있습니다. 그 한계에도 불구하고, 방법은 간단한 시나리오에서 텍스트를 세로 중앙에 배치하는 빠르고 쉬운 솔루션입니다.

수직 센터링을 위해 Flexbox 사용

CSS 플렉스박스

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

수직 센터링을 위해 그리드 사용

CSS 그리드

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

수직 센터링을 위한 테이블 표시 사용

CSS 테이블 표시

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

수직 센터링을 위해 줄 높이 사용

CSS 줄 높이

삼

수직 센터링을 위한 CSS 변환 탐색

텍스트를 수직으로 중앙에 배치하는 또 다른 효과적인 방법 CSS를 사용하고 있습니다 재산. 결합하여 ~와 함께 transform: translateY(-50%);, 정확한 수직 정렬을 달성할 수 있습니다. 첫째, 로 설정되어 있습니다 기준점 역할을 하게 됩니다. 그런 다음 하위 요소는 상위 컨테이너의 상위 50%에 위치합니다. 마지막으로, 신청 transform: translateY(-50%); 요소를 자체 높이의 절반만큼 위로 이동하여 수직으로 완벽하게 중앙에 배치합니다.

이 방법은 뛰어난 유연성을 제공하며 텍스트 및 이미지를 포함한 다양한 유형의 콘텐츠에 적합합니다. 콘텐츠의 높이에 관계없이 센터링 효과가 일관되게 유지되므로 동적 콘텐츠를 처리할 때 특히 유용합니다. 추가적으로, 결합 다른 CSS 속성을 사용하면 더욱 복잡하고 창의적인 레이아웃 디자인이 가능해집니다. 이 접근 방식은 Flexbox나 Grid에 비해 약간 더 많은 코드가 필요하지만 요소 위치 지정을 정밀하게 제어할 수 있습니다.

  1. div에서 텍스트를 세로 중앙에 배치하는 가장 쉬운 방법은 무엇입니까?
  2. 사용 ~와 함께 그리고 종종 가장 쉽고 효과적인 방법입니다.
  3. 이전 브라우저에서 텍스트를 어떻게 세로 중앙에 배치하나요?
  4. 테이블 표시 방법 사용 그리고 이전 브라우저에서 수직 중앙 정렬을 달성하는 데 도움이 될 수 있습니다.
  5. CSS 그리드를 사용하여 텍스트를 세로로 가운데에 맞출 수 있나요?
  6. 예, CSS 그리드는 다음을 사용하여 텍스트를 세로로 가운데에 배치할 수 있습니다. 그리고 .
  7. 여러 줄의 텍스트를 세로로 가운데에 배치할 수 있나요?
  8. 예, Flexbox 또는 CSS Grid를 사용하면 컨테이너 내에서 여러 줄의 텍스트를 세로로 쉽게 중앙에 배치할 수 있습니다.
  9. 알려진 컨테이너 높이로 텍스트를 수직 중앙에 어떻게 배치합니까?
  10. 당신은 설정할 수 있습니다 속성을 컨테이너의 높이와 일치시켜 텍스트를 효과적으로 중앙에 배치합니다.
  11. 컨테이너 높이가 동적이면 어떻게 되나요?
  12. Flexbox, Grid 또는 속성은 동적 컨테이너 높이에서도 일관된 수직 센터링을 보장합니다.
  13. 사용하는데 단점이 있나요? ?
  14. 효과적이기는 하지만 부모가 다음을 갖추어야 합니다. Flexbox나 Grid에 비해 구현이 약간 더 복잡할 수 있습니다.
  15. 반응형 디자인에서 텍스트를 수직 중앙에 어떻게 배치합니까?
  16. 반응형 디자인에는 Flexbox 또는 CSS 그리드를 사용하는 것이 좋습니다. 다양한 화면 크기와 방향에 잘 적응하기 때문입니다.

여러 가지 효과적인 방법을 통해 div 내에서 텍스트를 세로로 중앙에 배치할 수 있습니다. Flexbox 및 Grid와 같은 최신 기술은 최고의 유연성과 구현 용이성을 제공합니다. 특정 경우에는 테이블 표시 및 줄 높이와 같은 이전 방법이 여전히 유용할 수 있습니다. 이러한 다양한 접근 방식을 이해하고 적용함으로써 개발자는 콘텐츠가 시각적으로 매력적이며 다양한 장치와 브라우저에서 적절하게 정렬되도록 할 수 있습니다.