Вертикальный выровнять средний текст и изображение по ссылке

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