높이가 100픽셀인 박스에 이미지를 세로 방향으로 가운데에 정렬하려면 줄높이(line-height)를 100픽셀로 하고 이미지의 세로 정렬(vertical-align)을 가운데로 해 주면 된다. 물론 이미지의 높이는 100픽셀이 넘으면 안된다.
<div class="thumb"> <img src="thumb.jpg" alt="" /> </div>
div.thumb {
line-height: 100px;
}
div.thumb img {
vertical-align: middle;
}
각 브라우저는 font-size와 line-height의 차이의 1/2인 리딩(leading)을 일부 다르게 계산하고 있기 때문에, 브라우저에 따라 상하로 1~2px의 차이가 발생함.
이 사이트의 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
Designed and Programmed by HYEONSEOK.COM, Since Dec 2000