如何让div中的行内元素的文字垂直居中?? (例如<span>,<a>)

Question

为了适应不同的屏幕尺寸, 高度都是用百分比表示, 这样一来, 行内元素的文字始终无法居中,不知有什么简单的解决办法吗.

代码如下
http://jsfiddle.net/76hW3/1/

Benutzer Password Registrieren Einloggen 全都无法垂直居中.

求高手解救

ps jsfiddle在这里显示有问题, 没能把问题很好的表现出来, 而且有两个按钮看不到了.
请大家直接打开连接

http://jsfiddle.net/76hW3/1/

Answer 1

首先题目的代码存在很大的兼容性问题
比如右边input用了浮动，而左边是正常的display：inline-block。
IE6下效果:

至于如何解决请自行google

如果题主不考虑IE6，那最好不过了，上面的可以忽略
垂直居中的解决办法：

1. 去掉.input { line-height:100% }
2. 在<span class="label">...</lable>后面加上<span class="extra"></span>
3. 添加样式:
   .label { ... vertical-align:middle; ... }
.extra { display:inline-block; height: 100%; vertical-align:middle;}

结果：http://jsfiddle.net/76hW3/1/

这种垂直居中的方法在张鑫旭的博客里面可以看到详细的解释