높이를 알 수 없는 Div에서 텍스트를 세로로 가운데에 맞추는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Divs의 동적 수직 텍스트 정렬

집

웹 프론트엔드

CSS 튜토리얼

높이를 알 수 없는 Div에서 텍스트를 세로로 가운데에 맞추는 방법은 무엇입니까?

Patricia Arquette

Nov 11, 2024 am 09:52 AM

How to Vertically Center Text in a Div of Unknown Height?

Divs의 동적 수직 텍스트 정렬

알 수 없는 높이의 div 내에서 수직 텍스트를 중앙에 배치하는 것은 어려울 수 있습니다. div의 크기에 관계없이 일관된 정렬을 보장하는 솔루션을 살펴보겠습니다.

이 솔루션은 표시 속성을 활용하여 래퍼 요소를 테이블로 설정합니다. 이를 통해 중앙에 배치하려는 요소 내에서 수직 정렬 속성을 활용할 수 있습니다.

예제 코드:

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

로그인 후 복사

body {width: 100%; height: 100%;}   /* This is just to "view" the div height... */

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

로그인 후 복사

방법 작동:

위치: 절대값 및 높이: 100% 속성은 div가 웹페이지의 전체 높이를 덮도록 보장합니다.
div에 display: table을 설정하면 h1 태그의 table-cell 속성이 해당 내용을 수직으로 정렬할 수 있습니다.
vertical-align: middle 속성은 div 내에서 h1 태그를 수직으로 가운데에 배치합니다. 이렇게 하면 div의 크기가 변경되더라도 텍스트가 중앙에 유지됩니다.

이 솔루션은 Internet Explorer, Firefox, Chrome, Opera 및 Safari를 포함한 다양한 브라우저 및 운영 체제에서 테스트되었습니다. 동적으로 높이 div 내에서 텍스트를 수직으로 가운데에 배치하는 간단하고 효과적인 방법을 제공합니다.

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

본 웹사이트의 성명

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