본문 바로가기
생활일기/tip tech

vertical-align에 대해 잘 못 알고 있는것

by 신일석 2007. 11. 1.

과일장수님의 글입니다.
http://blog.naver.com/frui2store?Redirect=Log&logNo=20003795265



이전에 나온 모든 CSS관련된 책에는...
vertical-align이 Block내의 상하 정렬 위치를 결정하는 속성으로 설명되어 있습니다.


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


vertical-align속성이 하는 역할은 inline내에서 서로 다른 font와 font-size가 배열되었을 때,
글의 정렬위치를 결정하는 역할을 합니다.

아래의 예를 보시길...

/ek080000000045.gif" width="302" height="342" />
이전에 알고 있던 방식(잘못구현되던 방식)

/gk080000000050.gif" width="476" height="202" />

위와 같이...



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


아래와 같이 입력된다.



 8포인트 텍스트
 16포인트 텍스트