Alignment of Inline Images

Back to Index

Here are different ways to align images using the align attribute of the img src tag

<img src="image.gif" align="top">

The text starts at the top on the left hand side of the image and wraps around underneath the image

<img src="image.gif" align="middle">

The text starts at the middle left hand side of the image and wraps around underneath the image

<img src="image.gif" align="bottom">

The text starts at the bottom left hand side of the image and wraps around underneath the image

<img src="image.gif" align="left">

The text starts at the top right hand side of the image and keeps wrapping to the right of the image

To stop the following text continuing this wrapping to the right of the image you have use the tag <br clear> as in <br clear="left">

<img src="image.gif" align="right">

The text starts at the top left hand side of the image and keeps wrapping to the left of the image

To stop the following text continuing this wrapping to the left of the image you have use the tag <br clear> as in <br clear="right">