정말 어렵다…
가운데 정렬하는 것이 이럴게 어려울줄이야..-_-;;;
나의 과제는 이렇다.
창의 세로크기에 따라서 항상 100% 크기로 세로가 늘어나야 하고,
그리고 그안에 있는 글이나 이미지는 항상 middle 에 와야 하는것이다.
vertical-align 속성 적용 가능 한 곳 : (아래의 경우만 된다고 한다.)
1. table내
2. inline 엘리먼트 : text, img, input (여러 inline엘리먼트 안에서 세로로 가운데 정렬이 되는 것/ div안에서의 가운데 정렬을 의미하지 않음)
드디어 실마리를 찾았다.
일단 IE8에서는 좀더 간단히 되는데 IE6,7에선 다른 방법을 해야된다.
아래 이미지를 참고…
내가 만든 소스는 이런것…
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>
html, body {height:100%; margin:0; padding:0;}
#contents {height:100%;display:table;border:1px solid #00C;}
#contents #box {display:table-cell;vertical-align:middle;background:#CCC;}
*html #contents #box {#position:absolute;#top:50%;background:#CCC;}
*html #contents #box img {#position:relative;#top:-50%;}
*:first-child+html #contents #box {#position:absolute;#top:50%;background:#CCC;}
*:first-child+html #contents #box img {#position:relative;#top:-50%;}
</style>
</head>
<body>
<div id=”contents”>
<div id=”box”><img src=”images/logo_06.gif” /></div>
</div>
</body>
</html>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>
html, body {height:100%; margin:0; padding:0;}
#contents {height:100%;display:table;border:1px solid #00C;}
#contents #box {display:table-cell;vertical-align:middle;background:#CCC;}
*html #contents #box {#position:absolute;#top:50%;background:#CCC;}
*html #contents #box img {#position:relative;#top:-50%;}
*:first-child+html #contents #box {#position:absolute;#top:50%;background:#CCC;}
*:first-child+html #contents #box img {#position:relative;#top:-50%;}
</style>
</head>
<body>
<div id=”contents”>
<div id=”box”><img src=”images/logo_06.gif” /></div>
</div>
</body>
</html>
6 comments
필요해서 검색하던 중, 알려주신대로 해보니 잘되네요 ^^ 감사합니다~
^^ 이런문제로 고생 많이 하시더라구요..
해결이 잘됐다니 다행이네요 ^^
헐 이거 가페에서 본거 같은데 출처가 완전 조금하케 나와있네영…
카페 내용도 직접 작성하신거 맞죠???
이건 다른 분의 블로그에서 퍼왔던거 같은데요. 그림은 카페 출처가 나와 있어서 그대로 표시했습니다. 내용은 제가 쓴 내용과 섞여 있구요~
좋은걸 감사합니다.
댓글 감사합니다.^^
Comments are closed.