g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Folklore and Mythology
Women's Fashion
Holiday/Seasonal Cooking
Hiking & Backpacking
New Age
Weight Loss

All times in EST

Full Schedule
g HTML Site

BellaOnline's HTML Editor


How to Post a Caption for Your Images

Guest Author - Elizabeth Connick

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:

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

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!

Add How+to+Post+a+Caption+for+Your+Images to Twitter Add How+to+Post+a+Caption+for+Your+Images to Facebook Add How+to+Post+a+Caption+for+Your+Images to MySpace Add How+to+Post+a+Caption+for+Your+Images to Del.icio.us Digg How+to+Post+a+Caption+for+Your+Images Add How+to+Post+a+Caption+for+Your+Images to Yahoo My Web Add How+to+Post+a+Caption+for+Your+Images to Google Bookmarks Add How+to+Post+a+Caption+for+Your+Images to Stumbleupon Add How+to+Post+a+Caption+for+Your+Images to Reddit

RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the HTML Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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 BellaOnline Administration for details.


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor