CSS 수직 중앙 정렬

div안에 내용을 세로로 가운데 정렬하기

(1) text가 들어간 부분을 자식 div로 만들고
(2) 위에 부모 div를 만들어
(3) 두 div를 table과 table cell로 만들어 vertical-align 속성을 적용

  • ie 7 이전 버전에서는 이 속성값을 지원하지 않음.
  • ie 7 이전 버전을 위해, 자식 div에 display: inline-block를 사용하는 방법이 있음.
<div id="wrapper">
  <div id="content">
    내용<br>
    내용<br>
    내용<br>
  </div>
</div>

#wrapper {display:table;}
#content {display:table-cell; vertical-align:middle;}
CSS에 게시되었습니다

관련 글

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다