div层、fieldset分组标签、table表格的居中特效的综合运用

今天，我的一个同学问我一个问题，fieldset标签中的内容如何居中呢？

代码也发给我看了，以下是代码(内容有所修改如下只是部分代码)：

   <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 层来控制居中。这样就可以了。

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

秒客网

div层、fieldset分组标签、table表格的居中特效的综合运用

相关文章