Images with Captions

Captions using CSS

In some situations you will want to include images with captions, like the one to the right.

This is a bit more involved than you might think. But once you understand it, it is easy to do, so stick with it.

When captioning images, you usually want to align the image - with the caption - to the right, left or center, just as you can do with images. Keeping them together is what makes it a bit tricky.

To caption an image using CSS rules, the process is:

• Use the HTML/Code editor.
• Create a div by opening with <div> and closing with </div> - a div is a divider within your page.
• Give the div a class of captionedleft, captionedright or captionedcenter.
• Put your image and caption within the div, separated by a <br />

This is how the captioned image to the right was created:

<div class="captionedright"><img src="http://geelen.com.au/wp-content/uploads/ebookstoriesofeyeloss.png" alt="Icon for Stories of Eye Loss" /><br />eBook: Stories of Eye Loss</div>


Here is the same image and caption, but this time using the captionedcenter style.

And here is the HTML for the centered image and caption.

<div class="captionedcenter" ><img src="http://geelen.com.au/wp-content/uploads/ebookstoriesofeyeloss.png" alt="Icon for Stories of Eye Loss" /><br />eBook: Stories of Eye Loss</div>


Captions using Tables

Another way of captioning images is to put the image and caption together in a table cell. This takes a bit more effort to setup, but is a better way when you want to caption two or more images in a group and control the layout.

To caption images using an HTML table:

• Create your table with rows and columns
• Suppress the default borders for the table if necessary using a div with class=’bordernone’ (see this article if unclear)
• Place each image in a cell, and after a <br /> place the caption.
• Embed your caption in a <small> tag if you want to reduce the font size of the caption.

Here is the HTML that created the two column table above:

<div class="bordernone">
<table>
<tr>
<td>
<img src="http://geelen.com.au/wp-content/uploads/ebookstoriesofeyeloss.png" alt="Icon for Stories of Eye Loss" /><br /><small>eBook: Stories of Eye Loss</small>
</td>
<td>
<img src="http://geelen.com.au/wp-content/uploads/ebookstoriesofeyeloss.png" alt="Icon for Stories of Eye Loss" /><br /><small>eBook: Stories of Eye Loss</small>
</td>
</tr>
</table>
</div>