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

【问题标题】：Vertical align middle text and image in link垂直对齐链接中的中间文本和图像
【发布时间】：2014-07-02 14:13:50
【问题描述】：

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

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; }

【问题讨论】：

你能提供一个小提琴吗？

标签： html css

【解决方案1】：

尝试将 position:absolute 添加到您的 .arrow-white-right 类中。

这是一个有效的 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; 
}

【讨论】：

【解决方案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

【讨论】：