div vertical-align valign

이전에 나온 모든 CSS관련된 책에는...

vertical-align이 Block내의 상하 정렬 위치를 결정하는 속성으로 설명되어 있습니다.

이는 잘못된 것입니다.

W3C.org에 권장된 사안이 아닌...브라우저에서 적용되는 예를 가지고 책의 내용을 만들었기 때문이죠. 저 또한 근 1년전까진 해도 그렇게 알고 있었지만, 익스플로러 6.0 SP1을 설치하고부터 이상하게 vertical-align속성이 이전까지와는 달라서, W3C.org에 들어가서 원문을 보니...

vertical-align속성이 하는 역할은 inline내에서 서로 다른 font와 font-size가 배열되었을 때,

글의 정렬위치를 결정하는 역할을 합니다.

아래의 예를 보시길...

이전에 알고 있던 방식(잘못구현되던 방식)

위와 같이...

한 줄 안에 서로 다른 크기의 폰트의 상하위치를 결정하는 것이 원래 vertical-align의 속성값이다.

아래와 같이 입력된다.

===================================================================================

<DIV>

<span style="font-size:8pt;vertical-align:text-bottom;">8포인트 텍스트</span>

16포인트 텍스트

</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>