如何垂直对齐'div'中的'span'与图标存在？

Question

我尝试通过css span和div div垂直对齐line-height中的height。 一切正常，但在添加span时，中心icon span会转移到底部。 谁能给我一个暗示？感谢。

  <span class="icon"></span>

垂直对齐失败
http://jsfiddle.net/9CJvm/

在没有图标范围的情况下正常工作
http://jsfiddle.net/9CJvm/1/

Answer 1

在这种情况下，您可以将vertical-align:middle添加到span.icon元素：

vertical-align属性的默认值为baseline;因此元素在父元素的基础上对齐。

UPDATED EXAMPLE HERE

.icon {
    vertical-align:middle;
    background-repeat:no-repeat;
    background-image:url(https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/50264_300699565862_8082907_q.jpg);
    height:50px;
    width:50px;
    display:inline-block;
}

Answer 2

您可以对vertical-align:middle和span.center使用span.icon。