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

尝试将position：absolute添加到.arrow-white-right class。

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

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

2 个答案: