HTML HTML

ALIGN sets the alignment of the image relative to the text around it.

The values for ALIGN can be divided into two groups: LEFT and RIGHT, which put the image on the left or right side of the page; and all the other values, which concern the vertical placement of an inline image.

LEFT and RIGHT

LEFT and RIGHT put the image on the left or right side of the page and cause the text to wrap around it:

This Code	Makes This
<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN=LEFT>	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN=RIGHT>	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Text will continue to wrap around the image until it gets past the image, or until you use <BR CLEAR="..."> to cause text to skip down to after the image:

This Code	Makes This
<IMG SRC="pumpkin.gif" ALT="picture of a pumpkin" ALIGN=LEFT> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<BR CLEAR=ALL> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

If the text looks crowded too close to the image, you may want to check <IMG HSPACE="..."> and <IMG VSPACE="...">.

The Other Values

All other values for ALIGN define the vertical position of the image to the surrounding text. With these other values, text does not wrap around the image.

Default

This is to show how text behaves without ALIGN

This Code	Makes This
<IMG SRC="alignbox3.gif" ALT="align box">	Xy

TOP

Aligns the top of the image with the top of the text.

This Code	Makes This
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=TOP>	Xy

TEXTTOP

In some browsers, TEXTTOP aligns the top of the tallest text with the top of the image. In other browsers, TEXTTOP behaves exactly the same as TOP, aligning the top of the theoretically tallest text with the top of the image.

This Code	Makes This
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=TEXTTOP>	xy

MIDDLE

This value has particularly different results in different browsers. In some browsers, ALIGN aligns the middle of the text with the middle of the image. In other, it aligns the bottom of the text with the middle of the image.

This Code	Makes This
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=MIDDLE>	Xy

ABSMIDDLE

ABSMIDDLE does what many people expect MIDDLE to do: align the middle of the text with the middle of the image.

This Code	Makes This
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=ABSMIDDLE>	Xy

BOTTOM

Aligns the bottom of the image with the bottom of the text.

This Code	Makes This
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=BOTTOM>	Xy

In some older browsers this meant that the image aligned with the lowest portion of the text, i.e. the low point to which the bottom of j abd y dangle. Most browsers understand BOTTOM to mean the baseline of the text.

ABSBOTTOM

ABSBOTTOM aligns the image and the absolute bottom of the text (including any dangling text like with the letters j and y).

This Code	Makes This
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=ABSBOTTOM>	Xy

BASELINE

In most browsers BASELINE means the same thing as BOTTOM: align the image with the baseline of the text. See above for explanation of BOTTOM.

This Code	Makes This
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=BASELINE>	Xy

<IMG BORDER="..."> >