带有 CSS 的图像标题答案

【问题标题】：Image Captions with CSS带有 CSS 的图像标题
【发布时间】：2011-09-04 23:53:11
【问题描述】：

我正在制作一个简单的基于 Web 的控制面板，但我对 CSS 知识的缺乏正在扼杀我。我基本上需要创建一个 div 类，它使用图像图标并在其下方放置文本标题（两者都是目标页面的链接）。

我在各种网站上找到了一些这样做的示例，但没有一个可以并排放置图标/标题。为了更好地了解我想要做什么，CPanel 是我想要完成的一个完美示例。

我该怎么做？

【问题讨论】：

你为什么不看看这个网站的 HTML/CSS？
为什么不在无边框表格中嵌入图片和标题？
使用 Chrome、Safari 或 Firefox 中的 Firebug 中的浏览器网络检查器查看它是如何设置的。
那只是一张图片，我不认为我可以真正访问他们的CPanel...

标签： css class html icons

【解决方案1】：

可能是这样的吗？

<div class="image-caption">
    Some Text
</div>

.image-caption {
    background: url(icon_path) no-repeat top center;
    width: icon_width;
    padding-top: icon_height;
}

【讨论】：

是的，这应该可以，但是有什么方法可以使它更...“模板”样式，可以从 HTML 中指定图像/标题/链接，而 CSS 只是放置它出去？
我不确定你的意思。像caption 标签？或者让它像这样内联显示：http://jsfiddle.net/sMDHS/?
有点像那个链接，但我终于找到了一个好链接。将其发布为答案。感谢您的帮助！

【解决方案2】：

找到了一个非常简单的网站，在这里可以完美运行...

http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm

【讨论】：