웹마스터 팁
div 세로 중앙 정렬팁
2014.09.01 17:03
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 속성을 이용해서 공백을 넣었기 때문에 좌우 정렬은 약간의 오차가 발생할 수 있다.