div 텍스트 수직 중앙정렬

html 2013.05.24 16:50

div 안에 텍스트를 수평중앙정렬하기 위해서는 text-align:center; 스타일을 주면 된다.
div 안에 텍스트를 수직중앙정렬을 하려면 vertical-align:middle; 스타일을 주면 될 것 같지만, 되지 않는다.
div 가 아닌 테이블의 경우 자동으로 수직으로도 정렬이 된다.
div 에서 수직으로 중앙정렬하기 위해서는 스타일에 display:table-cell; 속성을 주면 된다.

<div style="height:300px;text-align:right;display:table-cell;vertical-align:middle;">로그인 | 회원가입</div>

하지만 IE에서는 8.0 이상부터 위의 속성이 적용된다.
꼼수로는 div 의 height 값을 line-height 값과 동일하게 주면 된다.

<div style="height:300px;text-align:right;line-height:300px;">로그인 | 회원가입</div>



출처: http://dantes.kr/410

'html' 카테고리의 다른 글

라디오/체크박스와 텍스트 정렬하기  (0) 2013.06.25
html 캐쉬 안되게  (0) 2013.06.19
안드로이드 레이어팝업 이슈  (0) 2013.06.19
div 텍스트 수직 중앙정렬  (0) 2013.05.24

설정

트랙백

댓글