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 />&nbsp;

   <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">* &nbsp;姓名即登录名</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 层来控制居中。这样就可以了。

   我觉得这个问题,看是容易。做起来却花时。呵。。如果大家更好的解决方法,让我们一起分享。谢谢!

 

 

 

posted @ 2013-03-26 15:26  KenyonLi  阅读(1434)  评论(0编辑  收藏  举报