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

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

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

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

 

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

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

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

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

 

[CSS] 엘리먼트, 텍스트 center 정렬

엘리먼트 Center 정렬

 

텍스트 세로 정렬 (Vertical-align)