How to write a caption under an image?

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

<center> <a href=""> <img src="hello.png" width="100px" height="100px"> </a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href=""> <img src="hi.png" width="100px" height="100px"> </a> </center> 

How can I implement?

9 Answers

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> <a href="#"> <figure> <img src="" width="100px" height="100px" /> <figcaption>First image</figcaption> </figure> </a> <a href="#"> <figure> <img src="" 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> <a href=""> <img src="hello.png" width="100px" height="100px"> <div>Caption 1</div> </a> <a href=""> <img src="hi.png" width="100px" height="100px"> <div>Caption 2</div> </a> </div>​ 

​A fiddle is here.

For responsive images. You can add the picture and source tags within the figure tag.

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

Put the image — let's say it's width is 140px — inside of a link:

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

Next, put the caption in a and give it a width less than your image, while centering it:

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

Next, in the link tag, style the link so that it no longer looks like a link. You can give it any color you want, but just remove any text decoration your links may carry.

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

I wrapped the image with it's caption in a link so that no text could push the caption out of the way: The caption is tied to the picture by the link. Here's an example:

<div> <div> <a href=""><img src="hello.png" width="100px" height="100px"></a> caption 1 </div> <div> <a href=""><img src="hi.png" width="100px" height="100px"></a> caption 2 </div> </div> 

CSS is your friend; there is no need for the center tag (not to mention it is quite depreciated) nor the excessive non-breaking spaces. Here is a simple example:

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> <div> <a href=""><img src="hello.png" width="100px" height="100px" /></a> <span>This is some text</span> </div> <div> <a href=""><img src="hi.png" width="100px" height="100px" /></a> <span>And some more text</span> </div> <span></span> </div> 

To be more semantically correct and answer the OPs orginal question about aligning them side by side I would use this:

HTML

<div> <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;} 

The <figcaption> tag in HTML5 allows you to enter text to your image for example:

<figcaption> Your text here </figcaption>. 

You can then use CSS to position the text where it should be on the image.

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

Style as desired.