如何垂直对齐的div？ [英] How to vertically align divs?

问题描述

我试图做一个小的用户名和密码输入框。

I'm trying to make a small username and password input box.

我想问一下，你怎么垂直对齐一个div？

I would like to ask, how do you vertically align a 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来垂直对齐本身的中心？我试图把：

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;

在CSS与ID登录的股利，但它似乎并没有工作。任何帮助将是AP preciated。

in CSS for the div with id Login, but it doesn't seem to work. Any help would be appreciated.

推荐答案

在现代浏览器的最佳方法是使用flexbox：

The best approach in modern browsers is to use flexbox:

#Login {
    display: flex;
    align-items: center;
}

有些浏览器则需要厂商prefixes。对于旧的浏览器不flexbox支持（如IE 9，下），你需要实现使用老方法中的一个备用解决方案。

推荐阅读

• 浏览器支持
• 指南Flexbox
• <一个href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes"相对=nofollow>使用CSS灵活盒

• Browser support
• A Guide to Flexbox
• Using CSS Flexible Boxes

这篇关于如何垂直对齐的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！