css - div 에서 text 수직 정렬 시키기

요즘 한창 div와 css를 이용해 코딩 작업을 하고 있는데.. 작업을 할 때마다 나를 괴롭히던 문제가 바로 텍스트의
세로 가운데 정렬이었다. 메뉴를 구성할 때 li를 사용하면 기본적으로 텍스트는 상단에 붙게 되는데 보통 세로 가운데
정렬이 되도록 디자인을 하기 때문에 매번 참 고민이었다. 그동안 시도한 방법이 위, 아래로 같은 패딩을 주는 거였다.

그러다 오늘 우연히 CSS 관련 책을 보다가 line-height 속성을 이용해서 메뉴 텍스트를 세로 가운데로 정렬하는 것을
보게 되었다. 좀 미심쩍어 구글링해보니 원래 이 방법이 존재했던 모양이다. 진작에 좀 찾아보고 코딩을 할 것을...

테스트 삼아 몇 줄의 코드를 작성해보니까 왼쪽 이미지처럼 텍스트 정렬이
내가 원했던 대로 되는 것을 확인할 수가 있었다. 앞으로 이런 작업을 할 때는
자주 써먹어야 할 방법인 것 같다. 아래는 왼쪽 화면의 코드이다.

<style type="text/css">
.vertical-middle { border: 5px solid #690; width: 150px; line-height: 3em; }
</style>

<div class="vertical-middle">Text</div>

코드의 핵심은 line-height의 크기를 컨테이너의 크기만큼 지정해주는 것이다. 예를 들어 메뉴를 둘러싸는 컨테이너의
높이가 40px 이라면 line-height 의 값 역시 40px로 지정해주는 것이다. 이런 간단한 방법이 있는 줄 진작에 알았다면..

출처 - http://www.ncube.net/2272