如何在圖像下寫一個標題？

Question

我有兩個需要保持內聯的圖像; 我想在每張圖片下面寫一個標題。

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

我該如何實施？

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

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

這里有一個小提琴。

Answer 3

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

Answer 4

放置圖像 - 讓我們說它的寬度是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

Answer 5

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>

Answer 6

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

根據需要的風格。