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로만 가능할거 같던 녀석이 지원되니 재미있네요
'Web Programing! > HTML / CSS' 카테고리의 다른 글
| [HTML] ie에서 html5 사용하기 (0) | 2011.09.10 |
|---|---|
| [CSS] ie6에서 img 태그 사용시 하단에 공백이 생길 경우 (0) | 2011.09.06 |
| [CSS] div사용시 공백제거 (0) | 2011.09.06 |
| [CSS] div안에서의 수직정렬 (0) | 2011.09.06 |
| [CSS] background:url()로 된 이미지 링크걸기 (0) | 2011.09.06 |
| [CSS] css 줄, 자간, 간격 조절 (0) | 2011.09.06 |
| [CSS] 브라우져 종류별로 css 적용하기 (0) | 2011.09.06 |
