[CSS] div안에서의 수직정렬

<div> 태그는 자동으로 top 으로 정렬한다.. 정렬방식을 middle로 하고 싶지만 쉽지만은 않습니다.

왜냐하면 <div> 태그는 블럭 타입의 태그라서 vertical-align:middle 이 안먹힌답니다.

<td> 테그처럼 inline 타입태그는 가능하다는데 ...

하지만 <div> 태그에서도 vertical-align:middle 와 같은 기능을 하는법을 소개하겠습니다.

단 한줄 짜리 내용에 대해서만 vertical-align:middle 처럼 속성이 먹으므로 유의하기 바랍니다.

수직(가운데) 정렬하려는 <div> 태그의 height  가 30px; 라고 한다면

line-height:30px; <-- (div태그의 height와 같은 수치를준다) 를 추가해주면 <div> 태그내의 내용이
 
middle 형식으로 정렬 되있음을 볼수 있습니다.

예) <div id="test" style="height:30px; line-height:30px;"> 정렬 </div>