Question

我有登录表单，我希望它位于页面的中心位置。我的代码是：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html>
<head>
<title></title>

<style>
    div.ex
    {
        width:300px;
        padding:10px;
        border:5px solid gray;
        margin-left:auto;
        margin-right:auto;
    }

    .align {
        position: absolute;
        left: 8em;
    }
</Style>
</head>
<body>
<div class="ex">
<h1>签订</h1>
<hr>
${errorMessage}
<form action="register" method="post">
    <p>
        <label>
            ID：
            <input type="text" name="id" value="${person.id}" class="align"/>
        </label>
    </p>
    <p>
        <label>
            密码：
            <input type="password" name="password" class="align"/>
        </label>
    </p>
    <p>
        <label>
            确认密码：
            <input type="password" name="password" class="align"/>
        </label>
    </p>
    <p>
        <label>
            姓名：
            <input type="text" name="name" value="${person.name}" class="align"/>
        </label>
    </p>
    <p>
        <label>
            地址：
            <input type="text" name="address" value="${person.address}" class="align"/>
        </label>
    </p>
    <p>
        <label>
            电话：
            <input type="text" name="phoneNumber" value="${person.phoneNumber}" class="align"/>
        </label>
    </p>
    <input type="submit" value="注册"/>
</form>
</div>
</body>
</html>

除了所有文本字段都位于登录框外部之外，现在所有内容都位于中心位置。

如果有人可以帮我解决这个问题我很感激。

Answer 1

将以下行添加到div.ex：

的规则中

position:relative;

通过建立新的定位上下文，所有具有position:absolute的子元素现在相对于此div而不是页面主体定位。

Demo

需要一些帮助来集中登录表单

1 个答案: