정말 어렵다...
가운데 정렬하는 것이 이럴게 어려울줄이야..-_-;;;
나의 과제는 이렇다.
창의 세로크기에 따라서 항상 100% 크기로 세로가 늘어나야 하고,
그리고 그안에 있는 글이나 이미지는 항상 middle 에 와야 하는것이다.
내가 만든 소스는 이런것...
가운데 정렬하는 것이 이럴게 어려울줄이야..-_-;;;
나의 과제는 이렇다.
창의 세로크기에 따라서 항상 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>
'IT 소프트웨어 > CSS' 카테고리의 다른 글
| [CSS]처음 나오는 자식요소, 마지막 자식요소에만 적용하기 (first-child, last-child) (2) | 2011.03.18 |
|---|---|
| header 있고 body 있을때 body가 100% 높이 유지하도록 (0) | 2010.03.09 |
| E:first-child, E:lang(c) 유용한 몇가지 CSS (0) | 2010.01.26 |
| float 된 div를 포함한 div의 백그라운드가 안 보일때, float된 div 높이가 브라우저에 인식 안될때 clear해주는 방법 (10) | 2010.01.26 |
| IE8에서 이미지 사이의 여백 생기는 문제 (11) | 2010.01.15 |
