div层、fieldset分组标签、table表格的居中特效的综合运用
今天,我的一个同学问我一个问题,fieldset标签中的内容如何居中呢?
代码也发给我看了,以下是代码(内容有所修改如下只是部分代码):
<form action="http://www.cnblogs.com/userregist" method="POST" name="form1" enctype="multipart/form-data">
<div id="divMessage" align="center" style="position:absolute;width:100%;height:100%;overflow:auto">
<br />
<fieldset style="width:65%;">
<legend >用户注册</legend>
<table width="100%" border="0" cellpadding="3" style="border-collapse: collapse;">
<tr>
<td align="right">所在单位</td>
<td align="left">
<span class="Border_Add_Light">
<select id="UNITID" name="UNITID">
<%=db.getDwList("BPIP_UNIT", "520000000000") %>
</select>
</span>
</td>
</tr>
<tr>
<td align="right">警号:</td>
<td align="left">
<input id="POLICENUMBER" name="POLICENUMBER" type="text" class="text" size="50" maxlength="15" />
<font class="WriteSign">*</font>
</td>
</tr>
<tr>
<td align="right">姓名:</td>
<td align="left">
<input id="NAME" name="NAME" type="text" class="text" size="50" maxlength="30">
<font class="WriteSign">* 姓名即登录名</font>
</td>
</tr>
<tr>
<td align="right">密码:</td>
<td align="left">
<input id="LOGINPW1" name="LOGINPW1" type="password" class="text" size="50" maxlength="30" onkeyup="conPassword()">
<font class="WriteSign">*</font>
</td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td align="left">
<input id="LOGINPW2" name="LOGINPW2" type="password" class="text" size="50" maxlength="30" onkeyup="conPassword()">
<font id="conPw" class="WriteSign" style="display:none">密码输入不一致!请确认后重新输入</font>
</td>
</tr>
<tr>
<td align="right">性别:</td>
<td align="left">
<select id="SEX" name="SEX">
<%=dm.ShowDictSelect("OA_CODE_XB", "1")%>
</select>
</td>
</tr>
<tr>
<td align="right">民族:</td>
<td align="left">
<select id="UMZ" name="UMZ">
<%=dm.ShowDictSelect("OA_CODE_MZ", null) %>
</select>
</td>
</tr>
<tr>
<td align="right">身份证号:</td>
<td align="left"><input id="USFZ" name="USFZ" type="text" class="text" size="50" maxlength="18" /></td>
</tr>
<tr>
<td align="right">手机号码:</td>
<td align="left"><input id="MOBILE" name="MOBILE" type="text" class="text" size="50" maxlength="11" /></td>
</tr>
</table>
</fieldset>
</div >
</form>
这段代码:我用VS2010来进行运行的调试。
之前我也想过在 <fielset></fielset>中加一个<center>标签,
没有想到还是不行。找了大半天的原因。最终可以实现居中的效果,但还是美中不足。
我的解决方案:
在<fieldset >中把样式的宽度(width:550px)写死,高度让让它自动增长(height:auto,也可以不写)
为什么这样可以呢?后来我查了一些资料,自己总结了一下。也不知道是否复合还请大家帮看下,如有不对还请指出。谢谢!
其实,<fieldest>标签是被 div包裹起来的,div相当于容器,我认为 <fieldset style="width:65%;">中的样式的width:65%,这里是安百分比来分布的宽度的大小,是相对于div容器的,后来尝试一下,把它的单位修改为像素(Px),我认为像素是一个绝对定位的单位。虽然这样的定义有一点不太官方,但是我也一时想不到更好的定义。只要<fieldest>分组标签的大小固定在div容器中,则<fieldest>包裹中的table内容也会被控制。只需要调好,<fieldest>的大小包裹住<table>的样式,然后用div 层来控制居中。这样就可以了。
我觉得这个问题,看是容易。做起来却花时。呵。。如果大家更好的解决方法,让我们一起分享。谢谢!