Captions provide extra information about your Web images, but they can be difficult to add to Web pages without some extra HTML and CSS. This tutorial explains how to add a simple, yet nice looking caption to your images that will stick with your image where ever you place it on the page.
Difficulty: Average
Time Required: 5 minutes
Here's How:
- Add your image to your Web page. If you have questions about how to do this, read my how to: How to Add an Image to Your Web Page.
- Place a div tag around the image:
<div><img src="URL" alt="alternate text" width="width" height="height" /></div>
- Add a style attribute to the div tag:
<div style=""><img src="URL" alt="alternate text" width="width" height="height" /></div>
- Set the width of the div to the same width as the image, with the width style property:
<div style="width:image width px;"><img src="URL" alt="alternate text" width="width" height="height" /></div>
- I like my captions to be slightly smaller than the surrounding text, so add a font-size property to your div style:
<div style="width:image width px; font-size:80%;"><img src="URL" alt="alternate text" width="width" height="height" /></div>
- Captions look best if they are centered below the image, so add a text-align property to your style attribute:
<div style="width:image width px; font-size:80%; text-align:center;"><img src="URL" alt="alternate text" width="width" height="height" /></div>
- Finally, you'll want a little more space between the image and the caption, so you'll need to add a style attribute to your image with a padding-bottom style property on it:
<div style="width:image width px; font-size:80%; text-align:center;"><img src="URL" alt="alternate text" width="width" height="height" style="padding-bottom:0.5em;" /></div>
- Then add your text caption directly below the image:
<div style="width:image width px; font-size:80%; text-align:center;"><img src="URL" alt="alternate text" width="width" height="height" style="padding-bottom:0.5em;" />This is my caption</div>
- Upload your Web page to your server and test it in a browser.
Tips:
- Widths: Remember that CSS dimensions can be in many different measurements, so you must always include the measurement type, ie.
width: 100px;
Image dimensions are always in pixels, so you leave the measurement off, ie.width="100"
- If you make the width of your div wider than the image width, your caption may appear beside the image. If this is what you want, then add a <br /> tag directly before the caption and after the image tag.
- If you want your text to wrap around this image, you need to put the float style property or align attribute on the div tag rather than the image itself.
