HTML垂直对齐失败？
Posted
技术标签:
【中文标题】HTML垂直对齐失败？【英文标题】：HTML Vertical-align failed? 【发布时间】：2013-10-26 18:23:55 【问题描述】：我有一个包含 2 个文本框的简单表单。我只是想让表单出现在页面中间。页面中没有任何额外的元素。通过使用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: </span><input id="passWord" type="password" name="passWord" />
</label><br/>
<input type="button" value="Login" />
</label>
</div>
</form>
</body>
</html>
【问题讨论】：
请参阅this answer 和this site 了解您的问题的答案。 【参考方案1】：使用以下 CSS，它将内容垂直和水平居中。
您需要将html/body 设置为height:100%，然后将主体或父级设置为display:table。之后，将孩子设置为display:table-cell 和vertical-align:middle。这将负责垂直对齐。要水平居中，请使用margin:0px auto;，并在表单上设置宽度。
jsFiddle here
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/
【讨论】：
请注意，表格和表格单元格显示属性在 IE 中不起作用 @j08691 什么是 IE8 ;) ? 这是雷德蒙迪安，用来蒸一堆 shiznit。以上是关于HTML垂直对齐失败？的主要内容，如果未能解决你的问题，请参考以下文章