HTML垂直对齐失败？ [英] HTML Vertical-align failed?
问题描述
我有一个由2个文本框组成的简单表单。我只是想让表单出现在页面中间。页面中没有任何额外的元素。通过使用 align =center元素确实会移动到中心，但对于 vertical-align：middle ？
< html>
< body style =vertical-align：middle;>
< form>
< div align =centerstyle =vertical-align：middle;>
< h1> blabla< / h1>
< label>
< span>使用者名称：< / span>< input id =userNametype =textname =userName/>
< / label>< br />
< label>
< span>密码：& nbsp;< / span>< input id =passWordtype =passwordname =passWord/>
< / label>< br />
< input type =buttonvalue =Login/>
< / label>
< / div>
< / form>
< / body>
< / html>
使用以下CSS，它将内容垂直居中
您需要设置 html / body 到 height：100％，然后将主体或父项设置为 display：table 。之后，将孩子设置为 display：table-cell 和 vertical-align：middle 。这将处理垂直对齐。为了水平居中，请使用 margin：0px auto; ，并在表单上设置宽度。
< a href =http://jsfiddle.net/Sjk6m/ =nofollow> jsFiddle here
html，body {
height：100％;
宽度：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/
I have a simple form that consists of 2 textboxs. I'm just trying to make the form appearing in the middle of the page. There are no any extra elements in the page. By using align="center" the elements does move to the center but it's not the case for 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>
Use the following CSS, it centers the content both vertically and horizontally.
You need to set the html/body to height:100%, then set the body, or the parent to display:table. After that, set the child to display:table-cell, and vertical-align:middle. That will take care of the vertical alignment. In order to center horizontally, use margin:0px auto;, and set a width on the form.
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;
}
Full screen result here: http://jsfiddle.net/Sjk6m/embedded/result/
这篇关于HTML垂直对齐失败？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
