The align Attribute

Topics on This Page

The align Attribute
baseline, bottom and absbottom
middle and absmiddle
top and texttop
Conclusions
Example

The align Attribute

The HTML standard defines five values for an <img> tag's align attribute: bottom, middle, top, left and right. left and right work quite differently from the others: these turn the image into a floating image. I'll wait and discuss these two a little later.

Netscape and MSIE also recognize several additional values: baseline, absbottom, absmiddle and texttop. These aren't much different from bottom, middle and top, and I probably wouldn't even talk about them except for one reason: the default alignment in these browsers is baseline.

baseline, bottom and absbottom

Unless you use align="left" or align="right", an image is treated much like a letter of the alphabet. Take a look at the following code:

<p>
  Here is some text
  <img src="images/browndot.gif" width="8" height="8" alt="" />
  with an image between some words. Notice that descenders of
  letters such as y
  <img src="images/browndot.gif" width="8" height="8" alt="" />
  y extend below the image because the default alignment is baseline.
  Notice that the image can actually be
  pa<img src="images/browndot.gif" width="8" height="8" alt="" />rt
  of a word.
</p>

This is how this code is displayed:

Here is some text with an image between some words. Notice that descenders of letters such as y y extend below the image because the default alignment is baseline. Notice that the image can actually be part of a word.

This is baseline alignment, and is the default in all browsers. The bottom of the image is placed at the baseline of the text, which is the bottom of those letters that don't have descenders.

All browsers that I've used except MSIE 3 treat bottom the same as baseline. MSIE 3 treats bottom the same as absbottom.

absbottom is slightly different than baseline: the image aligns with the bottom of the descenders. Here's a paragraph with images that specify align="absbottom":

Here is some text with an image between some words. Notice the position of the images relative to letters such as y y. Notice that the image can actually be part of a word.

middle and absmiddle

middle aligns the middle of the image with the baseline of the text beside it. absmiddle aligns the middle of the image with the middle of the text beside it. Most of the time, the difference is too small to notice. Netscape 6 recognizes absmiddle but treats it the same as middle.

To illustrate middle, I'll make the image a bit taller. The first paragraph here uses images with the default baseline alignment. The second one uses align="middle" for each image.

Here is some text with an image between some words. Notice that descenders of letters such as y y extend below the image because the default alignment is baseline. Notice that the image can actually be part of a word.

The images in this paragraph have middle alignment rather than baseline alignment. Notice that the image can actually be part of a word.


These next two images illustrate the difference between middle and absmiddle. In some browsers, you'll see no difference at all. In others, you'll find the second one slightly higher than the first.

middle absmiddle.

The difference between middle and absmiddle is much more obvious when an image is next to another image rather than next to text. In these two examples, the image on the left does not include any align attribute. In the first example, the image on the right has middle. In the second, it has absmiddle. Except in Netscape 6, the alignment is quite different. I avoided putting any text on the line to avoid the confusion of whether to align the images relative to each other or relative to the text.

Different browsers display this in slightly different ways:

MSIE 5	Netscape 4	Netscape 6

top and texttop

top aligns the top of the image with the top of the tallest element next to it. texttop aligns the top of the image with the top of the tallest text next to it. These are frequently the same, but can be quite different. In the following examples, the first image has no align attribute. The second image has align="top" in the first example and align="texttop" in the second. This looked about the same in all of the browsers I've tried it in.

Some text Some more text

Some text Some more text

Conclusions

Only the bottom, middle and top values are "valid" — the others are proprietary extensions. Try to use only the valid ones. The others will cause error messages when you validate the page. But remember that the validator is only a tool: if one of the other values gives you the layout that you're looking for, go ahead and use it. Browsers that don't recognize the value will still display the image, the alignment just might not be what you want.

In practice, you'll seldom find that align will solve really tricky layout problems. Later, you'll more likely use either tables or CSS positioning to achieve your layout. You'll often use align just to position a caption beside an image, as in this example where I've used align="middle":

Larry's wolf pup

Example

Use these images to try out the various alignments. See what happens when you mix text and various images with different alignments on the same line. Remember that you can vary the width and height of the images.

Try the different alignment options on the wolf image. Note that the image itself doesn't move: the text beside it moves.

If you have more than one browser, try these experiments with more than one and notice the differences.