Maddog's HTML Primer for Real People

Chapter 6, Lesson 6

Ch 6, L 6 - Aligning Caption Text with Images

If you already know how to align text with an inline-image, you can skip this lesson.

In the simple images presented earlier, any text which occurred in the same line, but before or after the image was aligned with the bottom of the image, by default. Another way of looking at this is that the bottom of the image was aligned with the bottom of the text next to it. HTML provides an optional 'ALIGN=" attribute for use with the 'IMG' tag, that allows the HTML author to specify whether the text which follows the image should be aligned to the top, middle, or bottom of the inline image. the general form is:

Here, the usual rules apply about the use of whitespace with embedded attributes. The 'ALIGN' attribute requires a value, enclosed in quotation marks, and the three which concern us here are "TOP", "MIDDLE" and "BOTTOM".

When aligned 'BOTTOM', the bottom of the text is aligned is aligned with the bottom of the image. It's method looks like this:

When aligned 'MIDDLE', the bottom of the text is aligned with the middle of the image. It's method looks like this:

And finally, when aligned 'TOP', the top of the text is aligned is aligned with the top of the image. It's method looks like this:

Let's see it in action:

Here's the image with caption aligned TOP: <BR>
Looky here!...<IMG SRC="saturn1.gif" ALIGN="TOP">...<B>Saturn</B>
<P>
Here's the image with caption aligned MIDDLE: <BR>
Looky here!...<IMG SRC="saturn1.gif" ALIGN="MIDDLE">...<B>Saturn</B>
<P>
Here's the image with caption aligned BOTTOM: <BR>
Looky here!...<IMG SRC="saturn1.gif" ALIGN="BOTTOM">...<B>Saturn</B>
<P>
Here's the image with caption aligned TOP again: <BR>
Looky here!...<IMG SRC="saturn1.gif" ALIGN="TOP">...<B>Saturn</B> is a 
rad planet with super knarly rings which can't be scrubbed away 
no matter how hard you try.  Hey, fellow terrarians! Why can't the 
earth be that cool?

Here's the image with caption aligned TOP:
Looky here!......Saturn

Here's the image with caption aligned MIDDLE:
Looky here!......Saturn

Here's the image with caption aligned BOTTOM:
Looky here!......Saturn

Here's the image with caption aligned TOP again:
Looky here!......Saturn is a rad planet with super knarly rings which can't be scrubbed away no matter how hard you try. Hey, fellow terrarians! Why can't the earth be that cool?

In the demonstration, you'll note that all the text that's inline with the image is aligned as specified with the image. Here's a fine point of observation: when using 'ALIGN' attribute 'MIDDLE', the bottom of the text aligns to the middle of the image (rather than the middle of the text aligning to the middle of the image). This gives the effect, when aligning 'MIDDLE' of the text being aligned slightly above middle. (Don't ask me why they did that...) Also, when aligned 'TOP', the text doesn't always go all the way to the top. Some of the advanced browsers support additional tags that correct these problems, but we're not going to cover them, because they aren't universally applicable, and because they just aren't worth getting spun up about. (I'm compulsive, but not that compulsive...)

Also, in the last image of the demo, you see what happens if you get a line break (either as a result of an explicit <BR> or browser word-wrapping). Rather than advancing downward the normal line spacing, the text drops to the next line after the image. For this reason, at least from the standpoint of presentability, the 'TOP' and 'MIDDLE' alignments are best used as picture-captions only.

Overseer: Monty Northrup ...

... leave e-mail ...