HTML Codes

HTML Codes > Images >


           <IMG ...>


             <IMG WIDTH="...">


             <IMG BORDER="...">

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.
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

`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

`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

`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

`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

`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

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

`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


                                <IMG WIDTH="...">


                                <IMG BORDER="...">

HTML Codes

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

LEFT and RIGHT

The Other Values

Default

TOP

TEXTTOP

MIDDLE

ABSMIDDLE

BOTTOM

ABSBOTTOM

BASELINE