javaweb_表单居中

来源：互联网发布：java微信退款接口demo 编辑：程序博客网时间：2024/06/06 04:37

<%--  Created by IntelliJ IDEA.  User: Administrator  Date: 2017/12/13/013  Time: 9:09  To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <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 style="text-align: center;"><div id="login">    <div id="form">    <fieldset>    <legend>登陆界面</legend>    <form action="validate" name="test" method="get">        用户名：<input type="text" name="uname"><br>        密码：&nbsp&nbsp<input type="password" name="upass"><br>        <input type="submit" value="登录">        <input type="reset" value="清空">        <br>        <a href="newuser.jsp">注册新用户</a>    </form></fieldset>    </div></div></body></html>

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

阅读全文

0 0