使表单居中的方式

来源：互联网发布：四季彩软件下载编辑：程序博客网时间：2024/06/08 02:45

<STYLE type="text/css">#login{width:400px;height:280px;position:absolute;left: 50%;top: 50%;margin-left:-200px;margin-top:-140px;border:1px;background-color:red;align:center;}#form{width:300px;height:160px;position:relative;    left:50%;    top:50%;    margin-left:-150px;    margin-top:-80px;}</STYLE>  </head>    <body>     <div id="login">     <div id="form">    <s:form action="" >   <s:textfield name="username" label="用户名" ></s:textfield>     <s:password name="password" label="密码" ></s:password>    <s:select list="{}" listKey="1" listValue="1" label="用户类型"></s:select>    <tr align="center">    <td colspan="2" align="center" valign="middle">    <s:submit value="登录" theme="simple"></s:submit>       <s:reset value="重置" theme="simple"></s:reset>    </td>    </tr>    </s:form>    </div>    </div>  </body></html>

原理就是使用两个div,一个是绝对定位，一个是相对定位，绝对定位用于控制在浏览器中位置；相对定们的div把表单包起来，控制让其居中。

0 0