CSS에서 텍스트를 수직으로 정렬하는 방법

CSS에서 텍스트를 세로 정렬하는 가장 신뢰할 수있는 방법은 정렬 된 높이의 컨테이너 내에서 단일 및 여러 줄의 텍스트 라인에 적용되는 CSS와 함께 Flexbox를 사용하는 것입니다. 또는 장소 항목이 포함 된 CSS 그리드 : 센터는 그리드 기반 레이아웃에 대해 유사한 이점을 제공하는 반면, 컨테이너 높이와 일치하는 라인 높이는 단일 라인 텍스트에만 적합하며 디스플레이와 같은 오래된 방법 : 수직 정렬이있는 테이블 셀 : 변환과의 중간 또는 절대 포지셔닝 : 특정 사용 사례 또는 레거시 브라우저에 대한 낙하를 제공합니다.

CSS에서 텍스트를 수직으로 정렬하면 블록 요소, 테이블 셀 또는 플렉스 컨테이너 내부에 텍스트를 정렬하는지 여부와 같은 컨텍스트에 따라 달라질 수 있습니다. 오늘날 사용되는 가장 일반적이고 신뢰할 수있는 방법은 다음과 같습니다.

1. Flexbox 사용 (가장 일반적이고 권장)

Flexbox는 수직 중심 텍스트에 가장 쉽고 현대적인 방법입니다.

 .Container {
  디스플레이 : Flex;
  정렬 구조 : 센터; / * 수직 센터 */
  정당화 컨텐츠 : 센터; / * 수평 센터 (선택 사항) */
  높이 : 200px; / * 높이가 정의되어 있어야합니다 */
}

 <div class = "컨테이너">
  <p> 수직 중심 텍스트 </p>
</div>

• align-items: center 수직 정렬을 처리합니다.
• 단일 줄이나 텍스트 블록에 완벽하게 작동합니다.
• 반응 형 레이아웃에도 좋습니다.

2. CSS 그리드 사용

CSS 그리드는 Flexbox와 유사하게 작동하는 또 다른 현대적인 접근 방식입니다.

 .Container {
  디스플레이 : 그리드;
  장소 항목 : 센터; / * 수직 및 수평으로 중심 */
  높이 : 200px;
}

 <div class = "컨테이너">
  <span> 중앙 텍스트 </span>
</div>

• place-items: center align-items 및 justify-items 의 속기입니다.
• 이미 레이아웃에 그리드를 사용하고있을 때 좋습니다.

3. line-height 사용 (단일 라인 만)

컨테이너의 높이가 고정되어 있고 단일 라인의 텍스트를 중심으로하는 경우 line-height 컨테이너 높이와 일치시킵니다.

 .Container {
  높이 : 60px;
  라인 높이 : 60px; / * 높이와 동일 */
  텍스트 정렬 : 센터;
}

 <div class = "컨테이너">
  <span> 중앙 선 </span>
</div>

• 버튼 또는 NAV 링크에 간단하고 효과적입니다.
• 여러 줄이나 동적 컨텐츠에서는 작동하지 않습니다.

4. 디스플레이와 함께 vertical-align 사용 display: table-cell

이 방법은 실제 테이블을 사용하지 않고 테이블 동작을 모방합니다.

 .Container {
  디스플레이 : 테이블 세포;
  수직 정상 : 중간;
  높이 : 100px;
  너비 : 200px;
  텍스트 정렬 : 센터;
}

 <div class = "컨테이너">
  <p> 중앙 텍스트 </p>
</div>

• display: table .
• Flexbox 나 그리드보다 유연하지만 이전 브라우저에서 작동합니다.

5. 절대 포지셔닝 및 변환 사용

오버레이 또는 모달 헤더를 다룰 때 유용합니다.

 .Container {
  위치 : 상대;
  높이 : 200px;
}

.Container P {
  위치 : 절대;
  상단 : 50%;
  왼쪽 : 50%;
  변환 : 번역 (-50%, -50%);
  여백 : 0;
}

 <div class = "컨테이너">
  <p> 위치가 중심 </p>
</div>

• top: 50% 텍스트의 상단을 중간으로 이동합니다.
• transform: translate(-50%, -50%) 너비와 높이의 절반으로 다시 이동합니다.
• 컨테이너 크기에 관계없이 작동합니다.

주요 팁

• 컨테이너에 수직 정렬이 작동하기 위해 컨테이너에 높이가 정의되어 있는지 확인하십시오.
• Flexbox는 일반적으로 최신 레이아웃에 가장 적합한 선택입니다.
• 블록 요소의 vertical-align 피하십시오. 인라인, 인라인 블록 또는 테이블 셀에서만 작동합니다.
• 반응 형 디자인의 경우 고정 line-height 보다 Flexbox 또는 그리드를 선호하십시오.

기본적으로 레이아웃 구조에 맞는 방법을 선택하십시오. 대부분의 경우 Flexbox는 가장 깨끗하고 유지 관리 가능한 솔루션입니다.

위 내용은 CSS에서 텍스트를 수직으로 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!