HTML垂直对齐失败？

Question

HTML垂直对齐失败？

4

我有一个简单的表单，包含两个文本框。我只是想让表单出现在页面的中央。页面中没有任何额外的元素。使用 align="center" 可以将元素移动到中心位置，但对于 vertical-align:middle 不适用？

<html>
<body style="vertical-align: middle;">

<form>
<div align="center" style="vertical-align: middle;">
<h1>blabla</h1>
<label>
<span>Username: </span><input id="userName" type="text" name="userName" />
</label><br/>

<label>
<span>Password: &nbsp;</span><input id="passWord" type="password" name="passWord" />
</label><br/>
<input type="button" value="Login" />
</label>

</div>
</form>

</body>
</html>

- SuicideSheep

2

请查看此答案和此网站以获取您的问题的答案。 - josh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

使用以下CSS，可以将内容在垂直和水平方向上都居中。

您需要将 html/body 设置为 height:100%，然后将 body 或父元素设置为 display:table。之后，将子元素设置为 display:table-cell，并且设置 vertical-align:middle。这样就解决了垂直对齐的问题。为了水平居中，请使用 margin:0px auto;，并在表单上设置一个宽度。 查看jsFiddle示例

html, body {
    height:100%;
    width:100%;
    margin:0px;
}
body {
    display:table;
    vertical-align:middle;
}
form {
    display:table-cell;
    vertical-align:middle;
    width:240px;
    margin:0px auto;
}

全屏查看结果，请访问：http://jsfiddle.net/Sjk6m/embedded/result/