图片下方的文字答案

【问题标题】：Text underneath an image图片下方的文字
【发布时间】：2013-05-09 15:38:49
【问题描述】：

所以我在罐头图像中拥有的东西。我想要的是，在 HTML 中，让文本直接出现在这个罐子下面。罐头左侧和下方还有其他文字，以常规方式

表格。

这就是我所拥有的：

<img src="URL" alt=" align="right" border="0px">

<p class="MsoNormal" style="margin-bottom: 6pt;"><span style="font-size: 20.5pt; font-family: Helvetica, sans-serif;"><span style="font-weight: bold; color: rgb(0, 0, 205);">(header)</span></span></p>

<p class="MsoNormal" style="margin-bottom: 12pt;"><span style="font-size: 14pt;"><span style="font-family: Helvetica, sans-serif; color: rgb(51, 51, 51); font-size: 14pt;">(paragraph)</span></span></p>

这里的标题和段落是与罐子本身相关的内容。我需要的是直接在那个罐子下面的文本。谢谢。

【问题讨论】：

您可以使用 opacity 属性使顶部的
半透明。
你在 HTML 中有什么可以让一些文本出现在罐子的左边？请显示上下文。

标签： html image text

【解决方案1】：

将您的图像及其随附文本放入例如 div 元素中。

<div class="img-wrapper">
    <img src="" alt="" />
    <p class="img-desc">(Image caption)</p>
</div>

然后设置你的样式：

<style>
    .img-wrapper {
        float: right;
        margin: 0 0 0.5em 1em;
    }
    img {
        display: block;
        margin: 0 auto;
    }
    .img-desc { text-align: center; }
</style>

您确实应该避免在每个元素中设置“内联”样式。这使得代码更难维护。您不需要使用那些跨度元素，只需参考 p 元素上的类来设置文本的所有样式。

【讨论】：

+1 但由于img 和描述之间没有明确的关联，所以不要使用空的alt 属性，甚至更好，使用figure and figcaption
嗯，都是真的。我只是想我应该从过时的东西中进行温和的过渡。我没有给出 src 或 alt，因为 op 没有。
我应该提到这一点...但是添加用于超链接的代码是否适用于此？谢谢。

【解决方案2】：

在 HTML 中，似乎实现结果的唯一方法是使用表格，替换 img 元素，例如由

<table align=right>
<tr><td><img src="URL" alt="...">
<tr><td>Text under the image
</table>

使用 CSS，other alternatives 也是可能的。

【讨论】：