Adding Caption to Images

Adding Caption to Images

1. Add your image to your Web page.

2. Place a div tag around the image:



3. Add a style attribute to the div tag:




4. Set the width of the div to the same width as the image, with the width style property:




5. I like my captions to be slightly smaller than the surrounding text, so add a font-size property to your div style:




6. Captions look best if they are centered below the image, so add a text-align property to your style attribute:




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




8. Then add your text caption directly below the image:




9. Upload your Web page to your server and test it in a browser.

Tips:

1. Widths: Remember that CSS dimensions can be in many different measurements, so you must always include the measurement type, ie.



Image dimensions are always in pixels, so you leave the measurement off, ie.



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

3. If you want your text to wrap around image, you need to put the float style property or align attribute on the div tag rather than the image itself.