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

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

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

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

 

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

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

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

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

 

Published by HyungJin

이 곳에 작성된 모든 컨텐츠는 CCL 규약의 CC BY-NC-SA (저작자표시-비영리-동일조건변경허락) 조건을 따릅니다. 비상업적 용도로 출처를 밝혀주시면 얼마든지 공유 가능합니다.

%d 블로거가 이것을 좋아합니다: