如何在图像下写字幕？
我有两个需要保持内联的图像; 我想在每个图像下写一个标题。
<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> 我该如何执行？
图和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>
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>
小提琴在这里。
<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>
把图像 – 假设它的宽度是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>
接下来，在链接标记中，设置链接的样式，使其不再看起来像链接。 你可以给它任何你想要的颜色，但只是删除您的链接可能带有的任何文字修饰。
<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
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>
<table> <tr><td><img ...><td><img ...> <tr><td>caption1<td>caption2 </table>
风格根据需要。
