Images Part 3

< Prev

Next >

Images Part 3

Topics on this page:

The align attribute
The hspace and vspace attributes
The clear attribute of
Centering an image

This page barely scratches the surface on the topic of image alignment. For a lot more information and examples, visit my Image Alignment and Fun with dots.

Top

The align attribute

The align attribute of the image tag primarily specifies how text around the image is aligned rather than how the image itself is aligned. The exception is align="right", which aligns the image itself to the right side of the page.

When you omit the align attribute, the image is treated very much like just a character. Compare the following:

<p>
  Some text
  <font size="+3">X</font>
  More text
</p><p>
  Some text
  <img src="images/wolfmail.jpg" width="50" height="35" alt="" />
  More text
</p>

Some text X More text

Some text More text

Three align values are used to align a single line of text with the image. The default is align="bottom". Compare that to align="middle" and align="top":

<p>
  Some text
  <img src="images/wolfmail.jpg" width="101" height="69" alt="" align="bottom" />
  More text
</p><p>
  Some text
  <img src="images/wolfmail.jpg" width="101" height="69" alt="" align="middle" />
  More text
</p><p>
  Some text
  <img src="images/wolfmail.jpg" width="101" height="69" alt="" align="top" />
  More text
</p>

Some text More text

The other two align values - "left" and "right" - work a bit differently. These place the image on the left or right side of the page, and cause text to wrap around it.

<p>
  Some text
  <img src="images/wolfmail.jpg" width="101" height="69" alt="" align="left" />
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
</p><p>
  Some text
  <img src="images/wolfmail.jpg" width="101" height="69" alt="" align="right" />
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
</p>

Some text Text - text - text - text - text - text - text - text Text - text - text - text - text - text - text - text Text - text - text - text - text - text - text - text Text - text - text - text - text - text - text - text Text - text - text - text - text - text - text - text Text - text - text - text - text - text - text - text Text - text - text - text - text - text - text - text Text - text - text - text - text - text - text - text Text - text - text - text - text - text - text - text Text - text - text - text - text - text - text - text

Top

The hspace and vspace attributes

hspace adds some blank space to the left and right of an image. For example, hspace="10" puts 10 pixels of space on both the left and right. vspace puts blank space above and below an image. Let's repeat our left and right aligned images with hspace and vspace:

<p>
  Some text
  <img src="images/wolfmail.jpg" width="101" height="69" align="left"
       alt="" hspace="30" />
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
</p><p>
  Some text
  <img src="images/wolfmail.jpg" width="101" height="69" align="right"
       alt="" hspace="40" vspace="20" />
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
  Text - text - text - text - text - text - text - text
</p>

Top

The clear attribute of

When you use align="left" or align="right" to wrap text around an image, you may find that you want to drop some of the text down below the image. You could try to use a bunch of tags to do this, but you can't know how many are needed for all variations of screen resolution and font sizes that your various visitors may be using. The clear attribute of is just what you need!

Here's an example of using   with a left-justified image:

<img src="images/browndot.gif" width="200" height="100"
     alt="" align="left" />
Here's some text. Nothing of any importance whatever.
<br clear="left" />
This text is below the image. It's still insignificant.

Here's some text. Nothing of any importance whatever.
This text is below the image. It's still insignificant.

clear="right" does the same thing for an image that has align="right":

<p align="right">
  <img src="images/browndot.gif" width="200" height="100"
       alt="" align="right" />
  Here's some text. Nothing of any importance whatever.
  <br clear="right" />
  This text is below the image.
</p>

Here's some text. Nothing of any importance whatever.
This text is below the image.

In both of the above examples,   would have worked just the same. clear="left" and clear="right" are useful when you have two images, one with align="left" and the other with align="right", with different heights.

<img src="images/browndot.gif" width="100" height="100" alt="" align="right" />
<img src="images/browndot.gif" width="100" height="200" alt="" align="left" />
Here's some text. How very interesting.
<br clear="right" />
Here's the text that comes after clear="right".
<br clear="all" />
This is after the clear="all".

Here's some text. How very interesting.
Here's the text that comes after clear="right".
This is after the clear="all".

Top

Centering an Image

There's no way to center an image by using the align attribute of <img>. There is no align="center" option. To center an image, enclose it in a <center> tag:

<center>
  <img src="images/wolfmail.jpg" width="101" height="69" alt="" />
</center>

<<< Home

<< Web

< HTML Notes

Top