如何在图片下写标题？答案

【问题标题】：How to write a caption under an image?如何在图片下写标题？
【发布时间】：2019-09-22 14:16:12
【问题描述】：

我有两张图片需要保持内联；我想在每张图片下写一个标题。

<center>
   <a href="http://example.com/hello">
       <img src="hello.png" width="100px" height="100px">
   </a>
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
   <a href="http://example.com/hi">
       <img src="hi.png" width="100px" height="100px">
   </a>
</center>

我该如何实施？

【问题讨论】：

@ceejayoz 更不用说所有的&nbsp，而不是说设置边距或使用其他 css 布局工具。
虽然这个问题基本上已经得到解答，但我发现获得适合内嵌图像宽度的标题的唯一方法是硬编码包装器或标题本身的宽度属性。跨度>
@McGarnagle 不要编辑其他人帖子中的代码含义。格式化是可以的（除非是 python），但是所有的代码内容都很重要！感谢您的编辑，jxworkmans 的帖子看起来毫无意义。确实，在question 中修复wrong code 完全是一派胡言。那么答案的意义何在？

标签： css html

【解决方案1】：

Figure 和Figcaption 标签：

<figure>
    <img src='image.jpg' alt='missing' />
    <figcaption>Caption goes here</figcaption>
</figure>

一定喜欢 HTML5。

查看示例

#container {
    text-align: center;
}
a, figure {
    display: inline-block;
}
figcaption {
    margin: 10px 0 0 0;
    font-variant: small-caps;
    font-family: Arial;
    font-weight: bold;
    color: #bb3333;
}
figure {
    padding: 5px;
}
img:hover {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
img {
    transition: transform 0.2s;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    -o-transition: -o-transform 0.2s;
}

<div id="container">
    <a href="#">
        <figure>
            <img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
            <figcaption>First image</figcaption>
        </figure>
    </a>
    <a href="#">
        <figure>
             <img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
            <figcaption>Second image</figcaption>
        </figure>
    </a>
</div>

【讨论】：

不过，大多数 IE 都需要 HTML5 shim。
这些标签没有任何帮助。它们只是虚拟标记，您需要在 CSS（和/或其他 HTML 标签）中完成所有工作。而且您需要额外的操作来使旧版本的 IE 将它们识别为虚拟标签。所以用div或者span比较简单。
@JukkaK.Korpela 这些标签非常重要。 stackoverflow.com/a/17272444/756329 和 html5doctor.com/lets-talk-about-semantics
问题是这样的：[figures] can be moved to another page or to an appendix without affecting the main flow。 <figure> 和 <figcaption> 不是带有标题的图像的通用替代品。它们仅适用于数字。如果您（例如）有一个由段落和带标题的照片组成的分步操作指南，那么在 html 中定义的相同段落中断处显示图像可能很重要。因此<figure> 在这里不适用（据我了解）。
我要补充一点，这些行不一定在图像下方放置图形标题。此处给出的 HTML 描述了内容，但外观受 CSS 影响/决定。

【解决方案2】：

CSS

#images{
    text-align:center;
    margin:50px auto; 
}
#images a{
    margin:0px 20px;
    display:inline-block;
    text-decoration:none;
    color:black;
 }

HTML

<div id="images">
    <a href="http://xyz.com/hello">
        <img src="hello.png" width="100px" height="100px">
        <div class="caption">Caption 1</div>
    </a>
    <a href="http://xyz.com/hi">
        <img src="hi.png" width="100px" height="100px"> 
        <div class="caption">Caption 2</div>
    </a>
</div>

A fiddle is here.

【讨论】：

【解决方案3】：

用于响应式图像。您可以在图形标签中添加图片和源标签。

<figure>
  <picture>
    <source media="(min-width: 750px)" srcset="images/image_2x.jpg"/>
    <source media="(min-width: 500px)" srcset="images/image.jpg" />
    <img src="images.jpg" alt="An image">
  </picture>
  <figcaption>Caption goes here</figcaption>
</figure>

【讨论】：

【解决方案4】：

将图片（假设它的宽度为 140 像素）放入链接中：

<a><img src='image link' style='width: 140px'></a>

接下来，将标题放在 a 中，并使其宽度小于您的图像，同时居中：

<a>
  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

接下来，在链接标签中，为链接设置样式，使其不再看起来像一个链接。你可以给它任何你想要的颜色，但只需删除你的链接可能带有的任何文本装饰。

<a style='text-decoration: none; color: orange;'>
  <img src='image link' style='width: 140px'>
  <div style='width: 130px; text-align: center;'>I just love to visit this most beautiful place in all the world.</div>
</a>

我将带有标题的图片包装在一个链接中，这样没有文字会影响标题：标题通过链接与图片相关联。这是一个例子：http://www.alphaeducational.com/p/okay.html

【讨论】：

禁止在 <a> 等内联标签中使用像 <div> 这样的块标签 - 您应该使用 <span> 作为标题。
用替换
在@TheAlpha 的示例中完全失败。看起来你需要
.
@mindplay.dk 我认为因为a 标签的内容模型是透明的，它可以接受父标签可以接受的任何子标签（交互式内容除外）。如我错了请纠正我？我想学习。 w3.org/TR/html5/text-level-semantics.html#the-a-element
@Pierre 因为span 是一个内联元素。您可以使用span 或div，但您需要添加display: inline-block;。

【解决方案6】：

CSS 是你的朋友；不需要中心标签（更不用说它已经很贬值了），也不需要过多的不间断空格。这是一个简单的例子：

CSS

.images {
    text-align:center;
}
.images img {
    width:100px;
    height:100px;
}
.images div {
    width:100px;
    text-align:center;
}
.images div span {
    display:block;
}
.margin_right {
    margin-right:50px;
}
.float {
    float:left;
}
.clear {
    clear:both;
    height:0;
    width:0;
}

HTML

<div class="images">
    <div class="float margin_right">
        <a href="http://xyz.com/hello"><img src="hello.png" width="100px" height="100px" /></a>
        <span>This is some text</span>
    </div>
    <div class="float">
        <a href="http://xyz.com/hi"><img src="hi.png" width="100px" height="100px" /></a>
        <span>And some more text</span>
    </div>
    <span class="clear"></span>
</div>

【讨论】：