我有两个图像需要保持内联；我想在每张图片下写一个标题。
<center>
<a href="http://example.com/hello">
<img src="hello.png" width="100px" height="100px">
</a>
<a href="http://example.com/hi">
<img src="hi.png" width="100px" height="100px">
</a>
</center>
我该如何实施？
Figure https://developer.mozilla.org/en-US/docs/HTML/Element/figure and 图标题 https://developer.mozilla.org/en-US/docs/HTML/Element/figcaption tags:
<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
