Learn HTML Code Tutorial Reference Guide

Attribute for <IMG ...>
ALIGN = LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABSMIDDLE | BOTTOM | ABSBOTTOM | BASELINE

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 produces this
<IMG SRC="pumpkin.gif" ALT="picture
of a pumpkin" ALIGN=LEFT>
picture of a pumpkin 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>
picture of a pumpkin 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 produces 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. picture of a pumpkin 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 produces this
<IMG SRC="alignbox3.gif" ALT="align box">
Xy align box

TOP

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

this code produces this
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=TOP>
Xy align box

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 produces this
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=TEXTTOP>
xy align box

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 produces this
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=MIDDLE>
Xy align box

ABSMIDDLE

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

this code produces this
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=ABSMIDDLE>
Xy align box

BOTTOM

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

this code produces this
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=BOTTOM>
Xy align box

illustration of the effect of ALIGN=BOTTOM and ALIGN=BASELINE 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 produces this
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=ABSBOTTOM>
Xy align box

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 produces this
<IMG SRC="alignbox3.gif" ALT="align box" ALIGN=BASELINE>
Xy align box




 

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   Privacy Policy   |   About
Copyright ©1997-2002 Idocs and ©2002-2014 HTML Code Tutorial