如何垂直對齊'div'中帶有圖標的'span'？

Question

我試圖通過css line-height和div height在div中垂直對齊span。 所有的工作都很好，但是當添加icon span時，中心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。