4.15.1 Examples of IMG Alignment

ALIGN="top"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=TOP> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=TOP 
alignment attribute.

This is rendered:

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=TOP alignment attribute.

ALIGN="texttop"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=texttop> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=texttop 
alignment attribute.

This is rendered:

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=texttop alignment attribute.

ALIGN="Bottom"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" ALIGN=BOTTOM> 
Here is some text related to the test image.
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=BOTTOM 
alignment attribute.

This is rendered:

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=BOTTOM alignment attribute.

ALIGN="absbottom"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=ABSBOTTOM> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=absbottom 
alignment attribute.

This is rendered:

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=absbottom alignment attribute.

ALIGN="middle"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=MIDDLE> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=MIDDLE 
alignment attribute.

This is rendered:

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=MIDDLE alignment attribute.

ALIGN="absmiddle"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=ABSMIDDLE> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=absmiddle
alignment attribute.

This is rendered:

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=absmiddle alignment attribute.

ALIGN="baseline"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=BASELINE> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=baseline 
alignment attribute.  

This is rendered:

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=baseline alignment attribute.

ALIGN="left"

Note also the use of BR elements to break the text flow.

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=LEFT> Here is some text related to the test image. <br> 
It is not very interesting, but should show how the 
text is wrapped around the image given the <br clear="left">
 ALIGN=leftcalignment attribute. . Note how the element
<br clear="left"> clears the flow of text to fall after the image.

This is rendered:

Here is some text related to the test image.
It is not very interesting, but should show how the text is wrapped around the image given
the ALIGN=left alignment attribute.

ALIGN="right"

<p> <IMG SRC="testicon.gif" ALT="[Test image]" 
ALIGN=RIGHT> Here is some text related to the test image.  
It is not very interesting, but should show how the 
text is wrapped around the image given the ALIGN=right
alignment attribute.

This is rendered:

Here is some text related to the test image. It is not very interesting, but should show how the text is wrapped around the image given the ALIGN=right alignment attribute.

Image as Hypertext Anchor

<p> <a href="image_examples.html"> <IMG SRC="testicon.gif" 
ALT="[Test image]" ALIGN=MIDDLE> </a>  This icon 
is also a hypertext link (in this case, just back to
this document).

This is rendered:

This icon is also a hypertext link (in this case, just back to this document).

Other Image Alignment Test Pages

John Van Essen has assembled another useful, is somewhat old, image alignment test page. This tests how different images, all on the same line of text, align with one another. It is found at:
http://www.gamers.org/~jve/imgtest/. This is also an old-ish document, but it is still relevant, and very useful for seeing how small images align with the adjacent text.