찾다

집  >  기사  >  웹 프론트엔드  >  반응형 Div 요소에서 텍스트를 수직 중앙에 배치하는 방법은 무엇입니까?

반응형 Div 요소에서 텍스트를 수직 중앙에 배치하는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-11-09 04:20:02456검색

How to Vertically Center Text in a Responsive Div Element?

반응형 Div 요소의 세로 텍스트 정렬

동적 크기의 DIV 컨테이너 내 콘텐츠를 처리할 때 텍스트를 세로로 정렬하는 것이 어려울 수 있습니다. 이 질문은 높이에 상관없이 DIV 요소 내에서 텍스트를 세로로 가운데에 배치하는 방법을 탐구합니다.

문제 설명:

다음 HTML 구조를 고려하세요.

<body>
    <div>

DIV의 높이에 상관없이 H1 태그를 DIV 내에서 수직 중앙에 어떻게 배치할 수 있나요?

해결책:

가장 효과적인 솔루션은 디스플레이 속성을 활용하는 것입니다. . 래퍼 요소를 테이블로 설정하여 수직 정렬:중간을 사용하여 요소를 중앙에 배치할 수 있습니다.

<body>
    <div>
        
Text

    
body {width: 100%; height: 100%;}  /* For visualization purposes */

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

테스트:

이 솔루션은 다음을 포함한 다양한 플랫폼과 브라우저에서 테스트되었습니다.

Windows XP Profissional 버전 2002 서비스 팩 3

  • Internet Explorer 8.0.6001.18702
  • Opera 11.62
  • Firefox 3.6.16
  • Safari 5.1.2
  • Google Chrome 18.0.1025.168m

Windows 7 Home Edition 서비스 팩 1

  • Internet Explorer 9.0.8112.164211C
  • Opera 11.62
  • Firefox 12.0
  • Safari 5.1.4
  • Google Chrome 18.0.1025.168m

Linux Ubuntu 12.04

  • Firefox 12.0
  • Chromium 18.0. 1025.151(개발자 빌드 130497 Linux)

위 내용은 반응형 Div 요소에서 텍스트를 수직 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

chrome html Property this display table windows linux ubuntu
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：IE 8에 포함된 요소에 영향을 주지 않고 div 배경의 불투명도를 어떻게 설정합니까?다음 기사：IE 8에 포함된 요소에 영향을 주지 않고 div 배경의 불투명도를 어떻게 설정합니까?

관련 기사

더보기