CSS垂直对齐中间 [英] CSS Vertical align middle

问题描述

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

I am trying to vertically align a SPAN element in the middle of a parent element.

这就是我正在做的事情：

This is what I am doing:

我正在尝试使用户名和密码标签都与输入框垂直对齐（中间）。

I am trying to get both the username and password labels to be vertically aligned (middle) with the input boxes.

这是我的HTML代码：

This is my HTML code:

<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中效果不错

Vertically aligning an image element inside of this wrapping DIV works absolutely fine, well in Chrome anyway, it just won't align with my SPAN!

任何帮助都将是惊人的。

Any help would be amazing.

推荐答案

通过CSS进行垂直对齐可能会很棘手，尽管CSS3带来了很多好处，但在当前的浏览器市场中CSS3的支持却不那么理想。

Vertical aligning via CSS can be tricky, and while CSS3 brings about a slew of goodies to help with that, CSS3 support is lackluster in the current browser market.

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

To achieve this effect I set the line-height property of the child element equal to the height of its containing element.

例如，我将使用以下CSS：

For example, I would use the following 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 垂直对齐某些内容是如果文本溢出到第二行，在这种情况下，您的设计将基本中断。

The only downside of using line-height to vertically align something is if the text overflows onto a second line, in which case your design will essentially break.

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