Image Alignment

The Align Attribute

Introduction

The HTML standard defines the following choices for the align attribute of the <img> tag: bottom, top, middle, left and right. There are some additional choices that many browsers recognize. These include absbottom, baseline, absmiddle and texttop.

When no align attribute is included, an image is treated very much as if it were just another letter of the alphabet. Notice the similarity:

Text ... text yyy Text ... text

Text ... text yyy A Text ... text

<p>
  Text ... text yyy
  <img src="Larry23.jpg" width="100" height="50" alt="" />
  Text ... text
</p>
<p>
  Text ... text yyy
  <big><big><big>A</big></big></big>
  Text ... text
</p>

When you add an align attribute other than align="left" or align="right", the image continues to be treated in the same way. Only one line of text can appear beside the image. The align attribute either affects the placement of the text in relation to the image, or affects the placement of the image in relation to the text.

Text ... text yyy This is align="middle".

Text ... text yyy This is align="top".

Bottom, Absbottom and Baseline

align="bottom", align="absbottom" and align="baseline" are nearly identical. The HTML Reference Library defines baseline and bottom in exactly the same way and absbottom as slightly different:

• Baseline and bottom align the bottom of the image with the baseline of the current line.
• Absbottom aligns the bottom of the image with the bottom of the current line.

"Baseline" refers to the bottom of a character that has no descenders such as "a" while "bottom" is the bottom of the lowest descender such as "y".

Here are some examples:

yyy (Default - No align attribute included)

yyy - align="baseline"

yyy - align="bottom"

yyy - align="absbottom"

Baseline is the only one of these three that acts the same in all of the browsers that I have used.

In Netscape 3 and 4 and Opera, I can't see any difference between baseline, bottom and absbottom. They all line up with the baseline (the y's descender extends below the bottom of the image).

In MSIE 3, baseline lines up with the baseline. Bottom and absbottom line up with the y's descender.

In MSIE 4 and 5 and in the alpha M13 version of Netscape 5, baseline and bottom line up with the baseline while absbottom lines up with the y's descender.

Middle and Absmiddle

Middle aligns the baseline of the text with the middle of the image. Absmiddle aligns the middle of the text with the middle of the image.

yYyYyY - align="middle"

yYyYyY - align="absmiddle"

In Netscape, I can't see any difference between these. In IE, absmiddle places the text slightly lower then middle does.

Top and Texttop

Top aligns the image with the top of the tallest item on the line. Texttop aligns the image with the top of the tallest text. These are usually the same, but could differ when two or more images are displayed on the same line with different align attributes.

align="middle"   align="top"

align="middle"   align="texttop"

Left

Values like bottom, middle and top treat an image much like a letter of the alphabet. Only one line of text can appear next to the image.

align="left" works much differently. The image is moved to the far left and text flows around it as seen in the following examples:

<p>
  <img ... align="left" />
  The inhabitants of ancient Egypt were called mummies.
  They lived in the Sarah Dessert and traveled by Camelot.
</p>

<p>
  The climate of the Sarah is such that the inhabitants
  <img ... align="left" />
  had to live elsewhere.
  Certain areas of the dessert are cultivated by irritation.
</p>

Notice how the placement of the image would have fallen in the middle of a line. align="left" dropped the image down below the line and over to the left, and then the text resumed on that same line.

Right

<p>
  <img ... align="right" />
  The Egyptians built the pyramids in the shape of
  a huge triangular cube.  The Pyramids are a range
  of mountains between France and Spain.
</p>

<p>
  The Bible is full of interesting caricatures.
  <img ... align="right" />
  In the first book of the Bible, Guinesses, Adam
  and Eve were created from an apple tree.
</p>