问题描述
我想要创建一个小的用户名和密码输入框。
我想问一下,如何垂直对齐div?
我有的是:
< div id =Loginclass = BlackStrip floatright>
< div id =用户名class =floatleft>用户名< br>密码< / div>
< div id =Formclass =floatleft>
< form action =method =post>
< input type =textborder =0>< br>
< input type =passwordborder =0>
< / form>
< / div>
< / div>
如何使用id用户名和窗体的div垂直对齐中心?我试过:
vertical-align:middle;
在CSS中使用id登录的div,但似乎不工作。
现代浏览器的最佳方法是使用flexbox:
#Login {
display:flex;
align-items:center;
}
某些浏览器需要供应商前缀。对于没有flexbox支持的旧版浏览器(例如IE 9和更低版本),您需要使用。
推荐读物
- 指南
I'm trying to make a small username and password input box.
I would like to ask, how do you vertically align a div?
What I have is:
<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>
How can I make the div with id Username and Form to vertically align itself to the center? I've tried to put:
vertical-align: middle;
in CSS for the div with id Login, but it doesn't seem to work. Any help would be appreciated.
The best approach in modern browsers is to use flexbox:
#Login {
display: flex;
align-items: center;
}
Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.
Recommended Reading
这篇关于如何垂直中心div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!