链接文本上方的图像

Question

如何让链接在文本上方显示居中的图像/图标？像这样：

如果可能，不使用CSS background: url('image path');因为我有很多链接，不同的图像。

我试过这样的

<a href=""><img src="http://www.biswanathcollege.org/templates/rt_crystalline_j15/images/icons/icon-home.png" style="display: block; margin: 0 auto;" />hello</a>

但它无法正常工作，链接会拉伸父容器的整个宽度。

Answer 1

所以你想要一个简单的链接图标

看看这个小提琴。

http://jsfiddle.net/RockRathore/63s6w/3/

<div style="border:1px solid;width:200px;background:#FAF9F2">
<div style="text-align:center">
    <a href="your_link.php">
        <img src="http://www.biswanathcollege.org/templates/rt_crystalline_j15/images/icons/icon-home.png" style="display: block; margin: 0 auto;";/>
            Hello
    </a>
</div>