logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

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:

<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!

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor