크기 조정 가능한 Div에서 텍스트를 세로 중앙에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

크기 조정 가능한 Div에서 텍스트를 세로 중앙에 배치하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-09 07:50:02

원래의

279명이 탐색했습니다.

How to Vertically Center Text in a Resizable Div?

크기 조정 가능한 Div에서 텍스트를 세로로 가운데 맞추는 방법

동적으로 크기가 조정된 div 요소로 작업할 때 div 내에서 텍스트의 세로 정렬을 유지하는 것이 어려울 수 있습니다. 이 문제는 div 높이가 고정되어 있지 않을 때 발생하며 사용자 브라우저 높이 등의 요인에 따라 달라질 수 있습니다.

해결책:

이 문제를 해결하려면 , 다용도 솔루션에는 표시 속성을 활용하여 div 요소를 테이블 형식 구조로 변환하는 것이 포함됩니다. 표시 속성을 table로 설정하여 div 내에 테이블과 같은 환경을 만듭니다. 이를 통해 텍스트 요소의 수직 정렬 속성을 사용하여 div 내에서 수직으로 중앙에 배치할 수 있습니다.

HTML 마크업:

<body>
    <div>
        <h1>Text</h1>
    </div>
</body>

로그인 후 복사

CSS 스타일 지정:

body {
    width: 100%;
    height: 100%;
}

div {
    position: absolute;
    height: 100%;
    width: 100%;
    display: table;
}

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

로그인 후 복사

테스트된 주목할만한 브라우저:

이 기술을 사용하여 다양한 브라우저에서 div 요소의 텍스트 수직 중심을 성공적으로 테스트했습니다. 포함:

Windows XP: