>  기사  >  웹 프론트엔드  >  동적 높이를 사용하여 Div에서 텍스트를 세로로 가운데에 맞추는 방법은 무엇입니까?

동적 높이를 사용하여 Div에서 텍스트를 세로로 가운데에 맞추는 방법은 무엇입니까?

Linda Hamilton
Linda Hamilton원래의
2024-11-07 10:39:02758검색

How to Vertically Center Text in a Div with Dynamic Height?

동적 높이 Div에서 텍스트의 수직 중심 맞추기

문제:
가변 높이의 div 요소 내에서 텍스트의 수직 정렬 달성 , 브라우저 창 크기에 관계없이.

설명:
동적으로 크기가 조정된 div 내에서 텍스트를 세로로 가운데에 배치하려면 표시 속성과 세로 정렬 속성을 활용합니다.

해결책:

  1. 래퍼 div를 테이블로 표시하도록 설정:

    div {
     display: table;
    }
  2. 스타일 텍스트 요소를 표 셀로 사용하고 가운데에 세로로 정렬합니다.

    h1 {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
    }

추가 참고 사항:
이 솔루션은 여러 환경에서 철저히 테스트되었습니다. Windows XP, Windows 7, Linux Ubuntu, Internet Explorer, Opera, Firefox, Safari, Google Chrome 등의 운영 체제 및 브라우저.

위 내용은 동적 높이를 사용하여 Div에서 텍스트를 세로로 가운데에 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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