테이블 수직 가운데 정렬좀 알려주세요~
<table align="center" valign="middle" width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
-------------
valign="middle"이라고 넣어주면 수직 가운데 정렬이 될줄 알았는데 안됩니다.....
어떻게 해야하는지좀 알려주시면 감사하겠습니다.....
기초적인 질문인것 같지만..... 제가 많이 부족해서 검색해도 알아먹기가 힘듭니다....
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
-------------
valign="middle"이라고 넣어주면 수직 가운데 정렬이 될줄 알았는데 안됩니다.....
어떻게 해야하는지좀 알려주시면 감사하겠습니다.....
기초적인 질문인것 같지만..... 제가 많이 부족해서 검색해도 알아먹기가 힘듭니다....
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
댓글 19개
<body>
<table align="center" valign="middle" width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
<table align="center" width="600" height=100% border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table align="center" valign="middle" width="600" height="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="100">sdfs</td>
<td>345</td>
</tr>
<tr>
<td height="100">4534</td>
<td>345</td>
</tr>
</table></td>
</tr>
</table>
거기에서는 아마 사용이 될 겁니다~
그리고 웹표준모드에서는 높이가 100% 라는 값은 존재하지 않습니다
<!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">
DTD1.0이라 그런가 셀 안에서의 valign은 사용이 되는거 확인했구요.....
어떻게 해야 표를 수직, 수평 모두 가운데 정렬을 할 수 있을까요......
가급적 그냥 <br /> 처리하세요-ㅁ-;
공부해야겠습니다......뭘 공부해야 할지도 모르겠다는 .........
<table valign='middle' width="600" height=100% border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" >
<pre>
가
나
다
라
.
.
.
</pre>
<td>
</tr>
</table>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
}
#wrap {
width:300px;
height:200px;
background-color:#CCCCCC;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
}
</style>
</head>
<body>
<div id="wrap">중앙대칭?</div>
</body>
</html>
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
요 부분이요...
테이블로 하시면 이 경우에는 손해가 더 많아 보입니다.
(div로도 여러가지 방법이 있습니다.)
50%는 화면을 100%로 보고, 그 한가운데인 50%에 갖다 놓으란 뜻입니다.
그런데 아이템의 좌측상단끝 점이 기준점이기 때문에,
그냥 50%라고 하면 위의 기준점이 화면 중앙으로 옵니다.
그러므로 아이템을 중앙으로 더 옮겨줘야 하는데 그것이 margin-top, margin-left입니다.
위에서 width가 300px지요? 그래서 반인 150px을 더 땡긴 겁니다.
화면의 중앙에 아이템의 중앙이 오도록 말이지요.
만약 아이템의 높이 height가 500px면 margin-top에 -250px라고 해야겠지요?