크기 조정 가능한 Div에서 텍스트를 세로 중앙에 배치하는 방법은 무엇입니까?
- Barbara Streisand원래의
- 2024-11-09 07:50:02245검색
크기 조정 가능한 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:
- Internet Explorer 8
- Opera 11.62
- Firefox 3.6.16
- Safari 5.1.2
- Google Chrome 18
Windows 7:
- Internet Explorer 9
- Opera 11.62
- Firefox 12
- Safari 5.1.4
- Google Chrome 18
Linux Ubuntu 12.04:
- Firefox 12
- Chromium 18
위 내용은 크기 조정 가능한 Div에서 텍스트를 세로 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.