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>
|
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 |
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.
|
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](alignbox3.gif) |
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](alignbox3.gif) |
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](alignbox3.gif) |
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](alignbox3.gif) |
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](alignbox3.gif) |
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](alignbox3.gif) |
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](alignbox3.gif) |
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](alignbox3.gif) |