Archive / Css / Line-height

높이가 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의 차이가 발생함.

• Ref. (1) http://html.nhndesign.com/blog/?p=74