我试图做一个小的用户名和密码输入框。
我想问,你如何垂直对齐一个div?
我有的是:
<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>
如何使用id用户名和窗体的div垂直对齐到中心?我试图把:
vertical-align: middle;
在CSS中的div与id登录,但它似乎不工作。任何帮助将不胜感激。
解决方法
现代浏览器中的最佳方法是使用flexBox:
#Login { display: flex; align-items: center; }
某些浏览器需要供应商前缀。对于没有flexBox支持的旧版浏览器(例如IE 9和更低版本),您需要使用older methods之一来实施后备解决方案。
推荐阅读
> Browser support
> A Guide to Flexbox
> Using CSS Flexible Boxes