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를 사용하여 텍스트를 세로로 가운데 맞추는 기술
첫 번째 스크립트 예에서는 다음을 사용합니다. display: flex; 플렉스 컨테이너를 정의합니다. 이를 통해 Flexbox 레이아웃 속성을 사용할 수 있습니다. 설정으로 justify-content: center; 그리고 align-items: center;, 텍스트를 가로 및 세로 중앙에 배치할 수 있습니다.
두 번째 스크립트 예제에서는 다음을 사용하여 CSS 그리드 레이아웃을 사용합니다. 삼. 설정으로 place-items: center;, 텍스트는 그리드 컨테이너 내에서 수평 및 수직 중앙에 배치됩니다. CSS Grid는 기존 방법에 비해 웹 레이아웃 디자인을 위한 더욱 강력하고 유연한 시스템을 제공합니다. 복잡하고 반응이 빠른 디자인을 쉽게 만들 수 있는 기능을 제공합니다. 그만큼 place-items: center; 명령은 수직 및 수평 중앙 정렬을 달성하는 간결한 방법으로, 코드를 단순화하고 가독성을 향상시킵니다.
수직 센터링을 위한 고급 CSS 기술
세 번째 스크립트에서는 테이블 표시 방법을 사용합니다. 환경 display: table; 용기에 그리고 display: table-cell; 다음으로 생성된 의사 요소에 대해 ::before 우리가 vertical-align: middle; 재산. 이 방법은 표 셀의 동작을 모방하여 내용을 세로로 가운데에 배치할 수 있습니다. 이 접근 방식은 최신 웹 디자인에서는 덜 일반적으로 사용되지만 이전 브라우저와의 호환성을 유지하거나 레거시 코드를 처리할 때 유용할 수 있습니다. 최신 레이아웃 시스템에 의존하지 않고도 콘텐츠를 중앙에 배치하는 안정적인 방법을 제공합니다.
네 번째 스크립트 예제에서는 line-height 재산. 설정하여 line-height 컨테이너의 높이와 같으면 텍스트가 수직으로 중앙에 배치됩니다. 이 기술은 단일 행 텍스트에 간단하고 효과적입니다. 그러나 컨테이너의 높이가 변경될 수 있는 여러 줄의 텍스트나 동적 콘텐츠에는 적합하지 않을 수 있습니다. 그 한계에도 불구하고, line-height 방법은 간단한 시나리오에서 텍스트를 세로 중앙에 배치하는 빠르고 쉬운 솔루션입니다.
수직 센터링을 위해 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 변환 탐색
텍스트를 수직으로 중앙에 배치하는 또 다른 효과적인 방법 div CSS를 사용하고 있습니다 transform 재산. 결합하여 position: absolute; ~와 함께 transform: translateY(-50%);, 정확한 수직 정렬을 달성할 수 있습니다. 첫째, div 로 설정되어 있습니다 position: relative; 기준점 역할을 하게 됩니다. 그런 다음 하위 요소는 position: absolute; 상위 컨테이너의 상위 50%에 위치합니다. 마지막으로, 신청 transform: translateY(-50%); 요소를 자체 높이의 절반만큼 위로 이동하여 수직으로 완벽하게 중앙에 배치합니다.
이 방법은 뛰어난 유연성을 제공하며 텍스트 및 이미지를 포함한 다양한 유형의 콘텐츠에 적합합니다. 콘텐츠의 높이에 관계없이 센터링 효과가 일관되게 유지되므로 동적 콘텐츠를 처리할 때 특히 유용합니다. 추가적으로, 결합 transform 다른 CSS 속성을 사용하면 더욱 복잡하고 창의적인 레이아웃 디자인이 가능해집니다. 이 접근 방식은 Flexbox나 Grid에 비해 약간 더 많은 코드가 필요하지만 요소 위치 지정을 정밀하게 제어할 수 있습니다.
CSS의 수직 센터링에 대한 일반적인 질문
- div에서 텍스트를 세로 중앙에 배치하는 가장 쉬운 방법은 무엇입니까?
- 사용 display: flex; ~와 함께 justify-content: center; 그리고 align-items: center; 종종 가장 쉽고 효과적인 방법입니다.
- 이전 브라우저에서 텍스트를 어떻게 세로 중앙에 배치하나요?
- 테이블 표시 방법 사용 display: table; 그리고 vertical-align: middle; 이전 브라우저에서 수직 중앙 정렬을 달성하는 데 도움이 될 수 있습니다.
- CSS 그리드를 사용하여 텍스트를 세로로 가운데에 맞출 수 있나요?
- 예, CSS 그리드는 다음을 사용하여 텍스트를 세로로 가운데에 배치할 수 있습니다. 삼 그리고 place-items: center;.
- 여러 줄의 텍스트를 세로로 가운데에 배치할 수 있나요?
- 예, Flexbox 또는 CSS Grid를 사용하면 컨테이너 내에서 여러 줄의 텍스트를 세로로 쉽게 중앙에 배치할 수 있습니다.
- 알려진 컨테이너 높이로 텍스트를 수직 중앙에 어떻게 배치합니까?
- 당신은 설정할 수 있습니다 line-height 속성을 컨테이너의 높이와 일치시켜 텍스트를 효과적으로 중앙에 배치합니다.
- 컨테이너 높이가 동적이면 어떻게 되나요?
- Flexbox, Grid 또는 transform 속성은 동적 컨테이너 높이에서도 일관된 수직 센터링을 보장합니다.
- 사용하는데 단점이 있나요? transform: translateY(-50%);?
- 효과적이기는 하지만 부모가 다음을 갖추어야 합니다. position: relative; Flexbox나 Grid에 비해 구현이 약간 더 복잡할 수 있습니다.
- 반응형 디자인에서 텍스트를 수직 중앙에 어떻게 배치합니까?
- 반응형 디자인에는 Flexbox 또는 CSS 그리드를 사용하는 것이 좋습니다. 다양한 화면 크기와 방향에 잘 적응하기 때문입니다.
수직 센터링에 대한 최종 생각
여러 가지 효과적인 방법을 통해 div 내에서 텍스트를 세로로 중앙에 배치할 수 있습니다. Flexbox 및 Grid와 같은 최신 기술은 최고의 유연성과 구현 용이성을 제공합니다. 특정 경우에는 테이블 표시 및 줄 높이와 같은 이전 방법이 여전히 유용할 수 있습니다. 이러한 다양한 접근 방식을 이해하고 적용함으로써 개발자는 콘텐츠가 시각적으로 매력적이며 다양한 장치와 브라우저에서 적절하게 정렬되도록 할 수 있습니다.