垂直對齊鏈接中的中間文本和圖像

Question

使用下面的代碼我的文本垂直對齊底部。需要幫助將文本中間與鏈接中的圖標垂直對齊。

jsfiddle

HTML

<a href="/The-Experience.aspx" class="icon"> 
    <span class="white bold">Learn More</span> 
    <div class="arrow-white-right"></div> 
</a> 

CSS

a.icon { line-height:46px; vertical-align:middle; } 
.arrow-white-right { display:inline-block; height:46px; width:46px; background:url('/img/icons/arrow-white-glyph.png'); background-repeat:no-repeat; background-position:-50px 0; } 
.white { color:#fff; } 
.bold {font-weight:bold; } 

Answer 1

嘗試增加的位置是：絕對您.arrow白右類。

這裏工作的jsfiddle http://jsfiddle.net/B4KC7/1/

.arrow-white-right { 
    position:absolute; 
    display:inline-block; 
    height:46px; width:46px; 
    background:url('/img/icons/arrow-white-glyph.png'); 
    background-repeat:no-repeat; background-position:-50px 0; 
} 

Answer 2

你需要創建一個img標籤，並給了vertical-align財產。

<img src="/img/icons/arrow-white-glyph.png" widtt="46" height="46"/> 

<a href="/The-Experience.aspx" class="icon"> 
    Learn More 
</a> 

a.icon { 
    line-height:46px; 
    color:#fff; 
    font-weight:bold; 
} 
img { 
    vertical-align:middle; 
} 

我也不太清楚爲什麼您使用的是<span>風格你的錨標記。這似乎有點多餘。

Here is a JS Fiddle