Div 요소 내에서 텍스트를 수직 중앙에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Div 요소 내에서 텍스트를 수직 중앙에 배치하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-12-23 18:22:14

원래의

284명이 탐색했습니다.

How to Vertically Center Text within a Div Element?

의 세로 정렬 요소

중간에 텍스트를 세로로 정렬하려면 특정 요소 높이를 유지하면서 다양한 접근 방식을 사용할 수 있습니다.

줄 높이 사용

단일 줄 텍스트를 세로로 가운데에 맞추려면 원하는 높이와 동일한 줄 높이를 적용하세요. 다음 CSS에 설명된 대로 요소 높이:

#abc {
  line-height: 50px;
}

로그인 후 복사

디스플레이 사용 속성

여러 줄 텍스트의 경우 텍스트를 그리고 디스플레이를 적용합니다: 테이블; 그리고 디스플레이: table-cell; 수직 정렬과 함께: 중간; 다음과 같습니다:

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

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

로그인 후 복사

변형 속성 사용

더 고급 정렬을 위해서는 변환Y()와 함께 변환 속성을 사용하는 것이 좋습니다.

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

로그인 후 복사

중요 참고:

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

원천：php.cn

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

에서 2024-04-29 11:01:01

2289

에서 2024-04-23 00:22:19

2429

에서 2024-04-19 15:37:47

2041

에서 2024-04-18 23:52:34

1926

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

1999