div 를 사용하여 중앙정렬하는 방법좀 가르쳐 주십시요.. 정보
div 를 사용하여 중앙정렬하는 방법좀 가르쳐 주십시요..
본문
아래 레이어를 중앙정렬하고 싶은데요..
text-align:center 를 사용하여 posision을 relative 로하면 중앙정렬은 되는데요.
posiison을 absolute 하고 중앙정렬하는 방법좀 가르쳐 주십시요.
======================================================================================
<div style="position:absolute;top:400px;">
<table border="0" height="138" bgcolor="#5cc1c9" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="20">
<tr>
<td width="385">
<font face="Arial" color="#FFFFFF"><b>급상승 인기게시물</b></font>
</td>
<td style="cursor:hand" valign="center" width="15" align="right">
<a href="#" NAME="popupCookie" onclick="notice_setCookie('popup','done',1);hideMe();"><font color=#ffffff size=2 face=arial style="text-decoration:none"><font color=#ffffff size=2 face=arial style="text-decoration:none">X </font></a>
</td>
</tr>
<tr>
<td width="100%" height="115" bgcolor="#FFFFFF" style="padding:8px" colspan="2">인기게시물 내용</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
==========================================================================================
text-align:center 를 사용하여 posision을 relative 로하면 중앙정렬은 되는데요.
posiison을 absolute 하고 중앙정렬하는 방법좀 가르쳐 주십시요.
======================================================================================
<div style="position:absolute;top:400px;">
<table border="0" height="138" bgcolor="#5cc1c9" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="20">
<tr>
<td width="385">
<font face="Arial" color="#FFFFFF"><b>급상승 인기게시물</b></font>
</td>
<td style="cursor:hand" valign="center" width="15" align="right">
<a href="#" NAME="popupCookie" onclick="notice_setCookie('popup','done',1);hideMe();"><font color=#ffffff size=2 face=arial style="text-decoration:none"><font color=#ffffff size=2 face=arial style="text-decoration:none">X </font></a>
</td>
</tr>
<tr>
<td width="100%" height="115" bgcolor="#FFFFFF" style="padding:8px" colspan="2">인기게시물 내용</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
==========================================================================================
댓글 전체
<div id="general" style="position:absolute; width:100%; height:auto;">
<div id="container" style="position:relative; width:500px; height:auto; margin:0 auto">
내용
</div>
</div>
<div id="container" style="position:relative; width:500px; height:auto; margin:0 auto">
내용
</div>
</div>
왼쪽으로 붙어버리고요...
text-align:center 로 감쌌을때는 사이즈가 확늘어버리네요..ㅜ.ㅜ
text-align:center 로 감쌌을때는 사이즈가 확늘어버리네요..ㅜ.ㅜ
레이아웃을 잘 못 짜신것 같네요....
absolute 포지션은 절대위치입니다, 현재 상태로는 윗 상위 위치가 어떤지 잘 모르겠으나, 현재로는, 당연히 좌측으로 붙지요,
상위에서, 좌표를 만들어야 합니다. 그래야 상속된 레이어가 위치를 잡지요..
예를 들께요.
<div style="text-align:center;top:0px;width:400px;">
<div style="position:absolute; top:400px;">
<table border="0" height="138" bgcolor="#5cc1c9" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="20">
<tr>
<td width="385">
<font face="Arial" color="#FFFFFF"><b>급상승 인기게시물</b></font>
</td>
<td style="cursor:hand" valign="center" width="15" align="right">
<a href="#" NAME="popupCookie" onclick="notice_setCookie('popup','done',1);hideMe();"><font color=#ffffff size=2 face=arial style="text-decoration:none"><font color=#ffffff size=2 face=arial style="text-decoration:none">X </font></a>
</td>
</tr>
<tr>
<td width="100%" height="115" bgcolor="#FFFFFF" style="padding:8px" colspan="2">인기게시물 내용</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
상위에서, 좌표를 만들어야 합니다. 그래야 상속된 레이어가 위치를 잡지요..
예를 들께요.
<div style="text-align:center;top:0px;width:400px;">
<div style="position:absolute; top:400px;">
<table border="0" height="138" bgcolor="#5cc1c9" cellspacing="0" cellpadding="5">
<tr>
<td width="100%">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="20">
<tr>
<td width="385">
<font face="Arial" color="#FFFFFF"><b>급상승 인기게시물</b></font>
</td>
<td style="cursor:hand" valign="center" width="15" align="right">
<a href="#" NAME="popupCookie" onclick="notice_setCookie('popup','done',1);hideMe();"><font color=#ffffff size=2 face=arial style="text-decoration:none"><font color=#ffffff size=2 face=arial style="text-decoration:none">X </font></a>
</td>
</tr>
<tr>
<td width="100%" height="115" bgcolor="#FFFFFF" style="padding:8px" colspan="2">인기게시물 내용</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>