묻고답하기
웹표준 div 높이 100% 만들고, 테이블 가운데 넣기
2010.10.27 16:57
윈도우 창에 맞춰 div를 짜고, 정 가운데 table을 넣으려고 합니다.
아래와 같이 짯는데... 안되네요;
뭐가 문제일가요?
도움 부탁드립니다.
<!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>
<title>TEST</title>
<style type="text/css">
html, body { width:100%; height: 100%; margin: 0; padding: 0; font-family: vendra, gulim, dotum, sens-serif; font-size:12px; }
#wrapper { position:relative; min-width:100%; min-height:100%; _height:100%; text-align:center; vertical-align:middle; }
</style>
</head>
<body>
<div id="wrapper">
<table style='border-width:1px; border-collapse:collapse;' border="1" cellspacing="0" cellpadding="0" width="300">
<tr>
<td>
테스트!
</td>
</td>
</table>
</div>
</body>
<!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 content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>TEST</title>
<style type="text/css">
html, body { width:100%; height: 100%; margin: 0; padding: 0; font-family: vendra, gulim, dotum, sens-serif; font-size:12px; }
#wrapper { position:relative; min-width:100%; min-height:100%; _height:100%; text-align:center; vertical-align:middle; }
/* 높이의 절반과 너비의 절반 만큼 margin 을 이용하여 조절 해 줍니다. 테이블의 스타일에서 말입니다*/
</style>
</head>
<body>
<div id="wrapper">
<table style='width: 300px; border-style: solid; border-width: 1px; top: 50%; left: 50%; position: absolute; height: 200px; text-align: center; margin: -100px 0pt 0pt -150px; border-color:black' cellspacing="0" cellpadding="0">
<tr>
<td>
테스트!
</td>
</td>
</table>
</div>
</body>