CSS垂直对齐中间

Question

我正在尝试在父元素的中间垂直对齐SPAN元素。

这就是我在做的事情：

我试图让用户名和密码标签与输入框垂直对齐（中间）。

这是我的HTML代码：

<div class="login_field_wrap">
    <span>Username</span>
    <input type="text" autocomplete="off" spellcheck="off" id="username" name="username">
    <div class="clear"></div>
</div>

这就是我的尝试：

.clear { clear:both; }
.login_field_wrap span {
float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; }
.login_field_wrap input {
float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA;
margin:0px; width:250px; }

垂直对齐此包装DIV内部的图像元素非常好，无论如何都在Chrome中，它只是不会与我的SPAN对齐！

任何帮助都会很棒。

Answer 1

通过CSS进行垂直对齐可能很棘手，虽然CSS3带来了大量好处来帮助解决这个问题，但CSS3支持在当前的浏览器市场中表现平平。

为了达到这个效果，我将子元素的line-height属性设置为等于其包含元素的高度。

例如，我会使用以下CSS：

.login_field_wrap { height:30px; /* or whatever is appropriate for your design */
.login_field_wrap span { height:30px; line-height:30px; }
.login_field_wrap input { height:30px; line-height:30px; }

使用line-height垂直对齐的唯一缺点是文本溢出到第二行，在这种情况下，您的设计将基本上破坏。

Answer 2

只需从您的span类中删除float属性并将其设置为display:inline-block，vertical-align:middle属性就可以了，如下所示：

.login_field_wrap span {
    color: #333333;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
}

编辑：稍微清理一下你的代码，这是一个应该适用于浏览器的演示。 http://jsfiddle.net/kUe3Y/

Answer 3

我发现最简单的方法是将父容器显示属性设置为table，将子显示属性设置为table-cell

#parent{
  display:table;
}

#child{
  display:table-cell;
  vertical-align:middle;
}

我能够将它垂直对齐div内的一个锚元素。

我在此jsFiddle中将其置于您的问题条款中。

Answer 4

我从来没有能够让vertical-align在除了＆lt; td＆gt;之外的任何地方工作。
我经常使用的解决方法是为.login_field_wrap定义高度，然后在＆lt; span＆gt;中设置line-height属性。等于.login_field_wrap的高度。

Answer 5

我认为text-align：center;也应该对元素起作用。如果我没有弄错的话，即使不是在文本上也是如此。