Adding a Caption to an Image with CSS

by The Web Squeeze on March 17, 2008 in Tips & Tricks with 4 Comments Tweet

Want an easy way to add a caption to an image like this?

HTML

Banana With a Peel

CSS

.imagecaption {
      width: 200px;
      border: 1px solid #999999;
      padding: .5em;
      }
p {
      font: small Verdana, Arial, Helvetica, sans-serif;
      text-align: center;
      }

Tagged: Tips & Tricks

4 Comments on "Adding a Caption to an Image with CSS"

1. ThomasH says:

   July 17, 2008 at 4:43 am

   This isn’t really valid code, is it?

   That should be a single line:

   Oh, and I’ve noticed that leaving out the px in height and width sometimes screwes up things.

   Reply
2. Karinne Legault says:

   July 17, 2008 at 8:24 am

   Hmmm… why is it not valid code? And what should be in one line?

   Units are very important, you should never leave them out … never. Unless of course you have a value of 0. Then 0px or 0em or 0% it’s all the same. It’s still 0.

   Reply
3. GTL says:

   January 1, 2009 at 10:50 pm

   <img src=”your-image-here.jpg”>
   <alt=”Stacked” width=”150″ height”100″ />

   should read:

   <img src=”your-image-here.jpg” alt=”Stacked” width=”150px” height=”100px” />

   Reply
4. Linda Chadbourne says:

   January 2, 2009 at 10:03 am

   Well it seems this post got a little messed up. Thanks for seeing the errors! It’s fixed now!

   Reply