CSS 레이어 수직중앙정렬

알고 계실분도 있겠지만, 모르시는 분들도 있을거 같아서 적어봅니다.

css에서 vertical-align은

vertical-align을 포함하고 있는 해당 객체를 둘러싸고 있는 div의 높이에 대해서 수직정렬을 시켜주지 못했었는데요

(padding을 사용했었죠.)

하지만 이 패딩도 이미지의 높이가 같아야만 제대로 나오지 다르면 패딩 상위값을 기준으로 맞춰서 나왔었습니다.

vertical-align 으로 정의된 객체중 가장 높이가 높은 놈을 기준으로 중앙정렬이 되는 것 같더군요 그래서

vertical-align으로 정렬된 객체들을 둘러싸고 있는 레이어에 font-size값으로 원하는 높이를 줘봤습니다.

결과는 성공이군요 ㅡ.,ㅡ;;

말주변이 별로 없어서 뒤죽박죽 적은거 같은데 아래거 한번 실행해 보시면 알거에요


<div style="border:1px solid gold;width:900px;height:100px;">
<div style="float:left;width:200px;"><img src="http://korea.internet.com/images/kictop_11.gif" alt="a" style="vertical-align:middle;" /></div>
<div style="float:left;width:200px;"><img src="http://image.hanmail.net/hanmail/top/2005f_top/daum.gif" alt="a" style="vertical-align:middle;" /></div>
<div style="float:left;width:200px;"><img src="http://image.hanmail.net/hanmail/top/2005f_top/daum.gif" alt="a" style="vertical-align:middle;" /></div>
<div style="float:left;width:200px;"><img src="http://image.hanmail.net/hanmail/top/2005f_top/daum.gif" alt="a" style="vertical-align:middle;" /></div>
</div>



<div style="float:left;border:1px solid gold;width:900px;font-size:100px;">
<div style="float:left;width:200px;"><img src="http://korea.internet.com/images/kictop_11.gif" alt="a" style="vertical-align:middle;" />&nbsp;</div>
<div style="float:left;width:200px;"><img src="http://image.hanmail.net/hanmail/top/2005f_top/daum.gif" alt="a" style="vertical-align:middle;" />&nbsp;</div>
<div style="float:left;width:200px;"><img src="http://image.hanmail.net/hanmail/top/2005f_top/daum.gif" alt="a" style="vertical-align:middle;" />&nbsp;</div>
<div style="float:left;width:200px;"><img src="http://image.hanmail.net/hanmail/top/2005f_top/daum.gif" alt="a" style="vertical-align:middle;" />&nbsp;</div>
</div>



여기서... 아래의 예제에서 &nbsp;를 빼버리면 파이어 폭스에서 적용 안되는걸 볼 수 있는데..

글자가 없어서 font-size를 안먹기 때문인것 같습니다. (IE는 그림도 폰트로 생각하나 ㅡㅡ?)

그래서 이건 좀 어거지 꽁순데... 파폭에서는 이미지만 모여있을경우엔  

이미지 옆에 살짝 &nbsp;를 추가하면 중앙정렬이 됩니다.

아주 구체적인 이유는 묻지말아주세요 ㅡ.,ㅡ;;;;;;;;;;;