Archive / Css / Line-height

인라인 박스(inline box)의 줄높이를 조절하는 속성이다.

이미지 세로 중앙 정렬

line-height 속성을 이용해서 높이를 알 수 없는 이미지를 세로 중앙 정렬 하는 것이 가능하다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>vertical align with line-height</title>
<style type="text/css">
div.thumb {
	background: #eee;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}
div.thumb:after {
	content: " ";
	margin-left: -0.6em;
	white-space: pre;
}
div.thumb img {
	vertical-align: middle;
}
</style>
</head>
<body>
<div class="thumb">
	<img src="http://hyeonseok.com/hyeonseok-.png" alt="hyeonseok.com">
</div>
</body>
</html>

line-height 값을 박스의 높이와 같은 값을 지정하고 안의 이미지를 vertical-align: middle을 사용해서 정렬한다. content 속성을 이용해서 공백을 넣었기 때문에 좌우 정렬은 약간의 오차가 발생할 수 있다. IE8, Fx3, Op9, Sf4에서 작동한다.

IE6에서도 작동 가능하게 개선된 것: CSS로 이미지 중앙 정렬 시키기..

참고자료

Page last modified on March 02, 2010, at 02:53 PM

Powered by PmWiki