Làm thế nào để viết chú thích dưới một hình ảnh?

Tôi có hai hình ảnh cần giữ nội tuyến; Tôi muốn viết chú thích dưới mỗi hình ảnh.

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

Làm thế nào tôi có thể thực hiện?

Thẻ hình và Figcaption :

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

Phải yêu HTML5.

Xem mẫu

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

Một câu đố ở đây.

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

Đặt hình ảnh - giả sử chiều rộng của nó là 140px - bên trong một liên kết:

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

Tiếp theo, đặt chú thích vào a và cung cấp cho nó một chiều rộng nhỏ hơn hình ảnh của bạn, trong khi căn giữa nó:

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

Tiếp theo, trong thẻ liên kết, hãy tạo kiểu cho liên kết để nó không còn giống như một liên kết. Bạn có thể cung cấp cho nó bất kỳ màu nào bạn muốn, nhưng chỉ cần loại bỏ bất kỳ trang trí văn bản nào mà các liên kết của bạn có thể mang theo.

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

Tôi đã bọc hình ảnh với chú thích trong một liên kết để không có văn bản nào có thể đẩy chú thích ra khỏi đường đi: Chú thích được gắn với hình ảnh bởi liên kết. Đây là một ví dụ: http://www.alphaeducational.com/p/okay.html

CSS là bạn của bạn; không cần thẻ trung tâm (chưa kể nó khá mất giá) cũng như không gian không phá vỡ quá mức. Đây là một ví dụ đơn giản:

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>

Đối với hình ảnh đáp ứng. Bạn có thể thêm các thẻ hình ảnh và nguồn trong thẻ hình.

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

Để chính xác hơn về mặt ngữ nghĩa và trả lời câu hỏi ban đầu của OP về việc sắp xếp chúng cạnh nhau tôi sẽ sử dụng điều này:

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/

Các <figcaption>thẻ trong HTML5 cho phép bạn nhập văn bản để hình ảnh của bạn ví dụ:

<figcaption>
Your text here
</figcaption>.

Sau đó, bạn có thể sử dụng CSS để định vị văn bản ở vị trí cần có trên hình ảnh.

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

Phong cách như mong muốn.