[CSS] DIV 영역안에 텍스트 세로 중앙 정렬하는 방법

HyungJin

11년 ago

테이블을 사용할땐 별다른 고민을 해보지 않았던 텍스트 세로 정렬입니다.

테이블을 사용할 당시에는 셀 안에 텍스트의 세로정렬은 큰 고민 없이 가능했습니다. 하지만 DIV안에 텍스트를 넣게 되는 경우 텍스트 새로 정렬에 대한 고민을 시작하게 됩니다.

가장 심플한 방법은 아래와 같습니다.

<style type="text/css">
   .div {display:table; width:300px; height:200px;}
   .p {display:table-cell; text-align:center; vertical-align:middle;}
</style>

<div class="div">
   <p class="p">Sample Text</p>
</div>

여기서 중요한 2가지는..

1. 텍스트를 감싸는 블록의 height 값이 명확해야 한다.

2. 부모 앨리먼트(div)의 css 속성을 display:table; 자식 앨리먼트(p)의 css 속성을 display:table-cell; 로 지정해주면 vertical-align 속성이 적용된다.

* IE7 이하 버전에서는 display:table, table-cell이 지원되지 않기 때문에 적용되지 않습니다.

Share Content