链接中的中间文本和图像垂直对齐

Question

使用下面的代码我的文字是垂直对齐底部。需要帮助垂直对齐中间的文字与图标在链接。

小提琴

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

尝试添加位置:绝对添加到您的.箭头-白-右类。

在这里，一个正在工作的小摆弄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>来设置锚标记的样式。看起来有点多余。

这是一个JS Fiddle