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

동적 높이 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!