Aligning Images

The element IMG can take the attribute ALIGN, with five values: TOP, BOTTOM, MIDDLE, and LEFT and RIGHT. The first three are used to align an image within a line of text. LEFT and RIGHT are used to let text flow around images.

TOP, BOTTOM and MIDDLE

TOP lines the top of the graphic up with the tallest item on the same line. BOTTOM aligns the bottom of the graphic with the bottom of the line of text. MIDDLE aligns the middle of the graphic with the top of the text. Here are four examples, one with no ALIGN attribute, and one with each attribute:

This sentence contains an <IMG SRC="image.gif" ALT="image.">
This sentence contains an image.

This sentence contains an <IMG SRC="image.gif" ALT="image." ALIGN="TOP">
This sentence contains an image.

This sentence contains an <IMG SRC="image.gif" ALT="image." ALIGN="MIDDLE">
This sentence contains an image.

This sentence contains an <IMG SRC="image.gif" ALT="image." ALIGN="BOTTOM">
This sentence contains an image.

LEFT and RIGHT

LEFT and RIGHT allow text to flow around graphics, either to the right or left respectively. Example:

<IMG SRC="balloon.jpg" ALT="My Balloon Vacation, 1996" WIDTH="200" HEIGHT="184" ALIGN="LEFT">Lorem ipsum dolor sit amet, consectetuer...

My Balloon Vacation, 1996 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

RIGHT would have a similar effect, with the graphic being presented to the right of the text.

If you would like there to be some space around a graphic, you can use VSPACE, for vertical space, and HSPACE, for horizontal space. You define the amount of space in pixels. Here's the example from above, with 10 pixels of horizontal space around the graphic:

<IMG SRC="balloon.jpg" ALT="My Balloon Vacation, 1996" WIDTH="200" HEIGHT="184" ALIGN="LEFT" HSPACE="10">Lorem ipsum dolor sit amet, consectetuer...

If you have a graphic aligned to the side, along with some text, and now you have another paragraph or something and you want it to be below the graphic, not next to it, you use  ,   or  .

Here is the above example again, but with   halfway through the text (because the graphic is on the left).

Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Previous: GIFs and JPGs
Next: Graphic Links