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对齐！

任何帮助都将是惊人的。

- TheCarver

---

请善待您的用户，而不是使用通用的<span>，请使用明确与表单控件相关联的标签：<label for="username">用户名</label>。 - steveax

@steveax：对于复选框和单选按钮，我总是使用标签，因为它们尺寸较小。使用标签显然增加了可点击区域，使其更易于使用，但是对于一个大小为250px x 30px的文本框，是否真的有必要提供标签呢？在浏览互联网时，我从未点击过文本框的标签以便聚焦。除此之外，还有其他原因让我应该使用标签吗？ - TheCarver

扩大点击区域只是使用标签的一个好处，另一个重要原因是为了屏幕阅读器用户。通过明确地将标签与表单控件相关联，当表单控件获得焦点时，屏幕阅读器将正确地读取标签。 - steveax

好的，值得一读。感谢您的评论@steveax。 - TheCarver

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进行垂直对齐的唯一缺点是，如果文本溢出到第二行，则您的设计基本上会破裂。

- Moses

---

这个方法很好用，但是人们应该知道，如果父元素的大小动态改变，对齐会出问题（或者至少保持在预定义的line-height: 30px内）。如果确实发生了改变，那么你应该考虑使用表格显示的方法。无论如何，确实需要有一种更好的方式来垂直对齐相关的内联元素。非常好的回答，@Moses。 - Philll_t

Answer 2

只需从您的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/

- Andres Ilich

Answer 3

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

#parent{
  display:table;
}

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

我能够让一个锚点元素在 div 中垂直对齐。我将它放入您问题的术语中，这里是 jsFiddle。

- Joe Badaczewski

Answer 4

我从未能够让除了 <td> 标签之外的其他元素正常工作 vertical-align。一个常见的解决办法是定义 .login_field_wrap 的高度，然后将您的<span>中的 line-height 属性设置为与 .login_field_wrap 的高度相等。

- Paul

---

有点棘手，是吧？！我设法让一个图像元素在包装 DIV 中垂直居中对齐，但它就是无法在 span 中实现！！ - TheCarver

Answer 5

我认为text-align:center;也适用于元素。如果我没记错的话，即使不是文本，通常也可以使用。

- corvid

---

文本对齐设置为居中会水平对齐文本和某些元素。正如问题标题所述，我正在寻找垂直居中对齐。无论如何，感谢您的努力。 - TheCarver