집 >웹 프론트엔드 >CSS 튜토리얼 >``요소 내에서 텍스트를 수직으로 정렬하는 방법은 무엇입니까?

``요소 내에서 텍스트를 수직으로 정렬하는 방법은 무엇입니까?

How to Vertically Align Text within a `` Element?

의 세로 텍스트 정렬

웹 개발에서

내에서 텍스트를 세로로 정렬합니다. 요소는 일반적인 과제가 될 수 있습니다. 이 질문은 이 정렬을 달성하기 위한 여러 가지 방법을 탐구합니다.

해결책 1: 줄 높이

가장 쉬운 해결 방법은

높이와 일치하는 요소입니다. 이는 텍스트가 한 줄일 때 효과적으로 작동합니다.

#abc {
  line-height: 50px;
}

해결책 2: 표 요소

여러 줄 텍스트의 경우 수직 정렬 속성은 ' 일하지 마세요. 대신 텍스트를 요소를 선택하고 다음 스타일을 적용합니다.

#abc {
  display: table;
  width: 100%;
}

#abc span {
  vertical-align: middle;
  display: table-cell;
}

해결책 3: 변환

또 다른 옵션은 변환 Y()와 함께 변환 속성을 사용하여 텍스트를 세로로 배치하는 것입니다. 이를 위해서는 요소의 위치를 절대 위치로 설정하고 상단에서 -50%만큼 이동해야 합니다.

#abc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

참고: 변환 솔루션은 IE8과 같은 이전 브라우저와 호환되지 않을 수 있습니다. 크로스 브라우저 지원을 위해 적절한 브라우저 접두사와 함께 사용하는 것이 좋습니다.

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

성명：