css - How to write a caption under an image?

Question

I have two images that need to kept inline; I want to write a caption under each image.

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

How can I implement?

Answer 1

Figure and Figcaption tags:

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

Gotta love HTML5.

---

See sample

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