如何在图像下写标题？

图 和 字幕标签:

<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>

<div style="margin: 0 auto; text-align: center; overflow: hidden;">
<div style="float: left;">
<a href="http://xyz.com/hello"><img src="hello.png" width="100px" height="100px"></a>
caption 1
</div>
<div style="float: left;">
<a href="http://xyz.com/hi"><img src="hi.png" width="100px" height="100px"></a>
caption 2
</div>
</div>

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;
}

超文本标示语言

<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>

CSS

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

超文本标示语言

<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>​

这里有把小提琴。

<table>
<tr><td><img ...><td><img ...>
<tr><td>caption1<td>caption2
</table>

风格如你所愿。

把图片(比方说它的宽度是140px)放到一个链接中:

<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>

接下来，在 link 标记中，设置链接的样式，使其不再看起来像链接。你可以给它任何颜色你想要的，但只是删除任何文字装饰你的链接可能携带。

<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

为了在语义上更加正确，并回答关于并排排列它们的最初问题，我会使用以下方法:

超文本标示语言

<div class="items">
<figure>
<img src="hello.png" width="100px" height="100px">
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="hi.png" width="100px" height="100px">
<figcaption>Caption 2</figcaption>
</figure></div>

CSS

.items{
text-align:center;
margin:50px auto;}




.items figure{
margin:0px 20px;
display:inline-block;
text-decoration:none;
color:black;}

Https://jsfiddle.net/c7borg/jlzc6h72/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>

HTML5中的 <figcaption>标签允许您在图像中输入文本，例如:

<figcaption>
Your text here
</figcaption>.

然后您可以使用 CSS 来定位文本在图像上的位置。