개발

div 안에 텍스트를 수직중앙정렬하는 방법

에드몽단테스 2011. 8. 31. 15:49
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>


반응형