链接图像和文本答案

【问题标题】：linking an image and text链接图像和文本
【发布时间】：2012-08-01 17:36:02
【问题描述】：

我想在图片和标题周围都加上一个 html 链接标签，比如

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

标题应该放在图片下方，但我不确定这样做的好方法（添加<br> 有效，但似乎不干净）。我希望能够使用样式元素，但我不能在其中放置 div。

【问题讨论】：

【解决方案1】：

你可以让a 表现得像一个div（关于它的样式）

display: block

【讨论】：

【解决方案2】：

您可以将标题包装在跨度内

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

【讨论】：

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

【讨论】：

【解决方案4】：

试试这个 - 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;
}

【讨论】：