为什么表格不会在页面垂直居中呢？

earthpea 2007-10-28 01:30:40

制作了一个信息提示的对话框，但怎么也不能垂直居中，晕了，大家帮我看一下，谢谢了。

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=gb2312" />

<title>信息提示</title>

<STYLE>

body ,th,td{

	font:normal 12px 宋体; 

}

td { height:24px; line-height:20px; background:#EEF7FD; font-size:12px; border:1px solid #fff; color:#135294; padding:2px; }

.td_title,th {

	height:24px;

	line-height:24px;

	background:#fff;

	color:#135294;

	font-weight:bold;

	border:1px solid #fff;

	padding-left:20px;

	text-align:left;

}

TD.td1 { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; BACKGROUND: #F1F3F5; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; }

TD.td2 { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; BACKGROUND: #E4EDF9; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; }

input   {vertical-align:middle;} 

.button { color: #135294; border:1px solid #666; height:21px; line-height:21px; background:url("skins/images/button_bg.gif")}



</STYLE>





</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor=#C4D8ED>

<table width="60%" border="0" cellspacing="1" cellpadding="0" align="center" valign="middle">

<tr> 

<th style="text-align:center;"><B>信息提示</B></th>

</tr>

<tr> 

<td width="100%" height=30 class="td2">

没有找到您所需要的内容！</td></tr><tr> <td width='100%' class='td1' align=center> <input type=button onClick='javascript:window.history.back();' value='　返　回　' class='button'></tr></table>

</html>

...全文

213 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

earthpea 2007-10-28

打赏
举报

晕，我加了半天都不行，现在才好了，呵呵
谢谢楼上，结帖

nicholsky 2007-10-28

打赏
举报

你的意思是不是想整个提示框在页面中垂直居中？如果是的话多套一个table在外面就最简单了。



<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=gb2312" />

<title>信息提示</title>

<STYLE>

body ,th,td{

    font:normal 12px 宋体; 

}

td { height:24px; line-height:20px; background:#EEF7FD; font-size:12px; border:1px solid #fff; color:#135294; padding:2px; }

.td_title,th {

    height:24px;

    line-height:24px;

    background:#fff;

    color:#135294;

    font-weight:bold;

    border:1px solid #fff;

    padding-left:20px;

    text-align:left;

}

TD.td1 { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; BACKGROUND: #F1F3F5; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; }

TD.td2 { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; BACKGROUND: #E4EDF9; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; }

input   {vertical-align:middle;} 

.button { color: #135294; border:1px solid #666; height:21px; line-height:21px; background:url("skins/images/button_bg.gif")}



</STYLE>





</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor=#C4D8ED>

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td align="center" valign="middle" style="background-color:transparent;" >

<table width="60%" border="0" cellspacing="1" cellpadding="0" align="center" valign="middle">

<tr> 

<th style="text-align:center;"><B>信息提示</B></th>

</tr>

<tr> 

<td width="100%" height=30 class="td2">

没有找到您所需要的内容！</td></tr><tr> <td width='100%' class='td1' align=center> <input type=button onClick='javascript:window.history.back();' value='　返　回　' class='button'></tr></table></td></tr></table>

</html>