[CSS] CSS로 이미지 중앙 정렬 시키기
CSS로 이미지 중앙 정렬 시키기..
http://hyeonseok.com/pmwiki/index.php/Css/Line-height
위의 글을 보시면 line-height를 이용하여 이미지를 정렬시키는 방법이 제시되어있습니다.
하지만 아쉽게도 위의 방법은 IE6이하의 브라우저에서는 지원되지 않더군요
그래서 살짝 수정해 보았습니다.
<!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">
* { font-family:dotum; }
div.thumb {
background: #eee; width: 100px; height: 100px; text-align: center;
font-size:100px; line-height:100px; overflow:hidden; }
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" height="70" alt="hyeonseok.com">
</div>
</body>
</html>
위와 같이 지정하면 IE6도 지원되게 됩니다.
Table로만 가능할거 같던 녀석이 지원되니 재미있네요