链接图像和文本

Question

我想在图像和标题周围包装一个html链接标记，所以像

<a href="link"><img src="...">Caption Text</img></a>

标题应该低于图像，但我不确定这样做的好方法（添加<br>作品，但看起来不干净）。我希望能够使用样式元素，但我不能在其中放置div。

Answer 1

试试这个 - DEMO

无需更改 HTML

<a href="link">
    <img src="http://lorempixel.com/200/100" />
    Caption Text
</a>

<强> CSS

a {
    display: inline-block;
    text-align: center;
    border: 2px solid orange;
}

img {
    display: block;
}

Answer 2

您可以将标题包含在范围内

<a href="link"><img src="..."/><span style="display: block;">Caption Text</span></a>

http://jsfiddle.net/ZgKqF/

Answer 3

以这种方式尝试：<a href="link"><img src="..." alt="Caption Text" /></a>

然后使用javascript显示alt属性并使用javascript显示。请查看此参考Get the "alt" attribute from an image that resides inside an <a> tag

Answer 4

您可以使a表现得像div（关于如何设置样式）

display: block