g
Printer Friendly Version

editor  
BellaOnline's HTML Editor
 

How to Post a Caption for Your Images

A picture may be worth a thousand words, but the ability to stick a few more words underneath it can still be a big help. Here’s how you can add a caption under your website’s images.

The general idea is to tie the image and the caption text together, so that wherever you post the image the caption will fall neatly underneath. Luckily HTML provides a great way to accomplish this via the div element. By throwing a div around both the image and the caption, you can essentially store them both in one box. It’s then easy for you to move the box around your site without changing the image and caption’s relative positions.

Take this image for example:



You can add a caption underneath this image just by typing it in, but it probably won't line up correctly and if you were to center or right-align the image you'd have real trouble getting the text to match. Instead, simply include the image and desired caption in a div element as follows:

<div>
<img src="owl.jpg"><br>
The majestic great horned owl
</div>

Now when you post the div to your site you'll see something like this:



The majestic great horned owl


This works pretty well, but the text isn't aligned correctly under the image – which we can change easily enough by adding a Cascading Style Sheet (CSS) rule to the mix. Wrapping the text in its own div element with the code 'style="text-align: center; width: 200px;"' will cause the text to center itself with respect to the larger div. Be sure to add a width attribute that matches your image's width, or the caption will center itself with respect to the page instead! Now the image and caption will look like this:



The majestic great horned owl



You can change the outer div's alignment using the "align" attribute and the image and caption will stay together, like this:



The majestic great horned owl



You can also use CSS rules to adjust your image and caption's appearance. Suppose for example you'd like a little space between the image and caption; you can simply add 'style="margin-bottom: 10px;"' to the img tag and your image and caption will now look like this:



The majestic great horned owl



On many older sites and a few newer ones, you might notice that the web developers use tables rather than divs to lay out images. This is acceptable, but the preference is always to use divs for positioning and use tables to present data – this is, after all, what tables are really meant to do in HTML!

This site needs an editor - click to learn more!

HTML Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact Editor Wanted for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor