Aligning Graphics

<img src="mycoolpic.gif" align="position" hspace="pixels" vspace="pixels">

Horizontal alignment Blank space bordering left and right side Blank space bordering top and bottom

In the hundreds of personal pages that I've visited on the net over the past few years, I've noticed that many web authors fail to take advantage of ability to float graphics to the left or right on their web pages. When you float images to the left or right, it causes adjacent text to flow along the right or left borders of your graphic and then continue below it once the text flow exceeds the bottom border. This makes text appear to 'wrap around' your graphics and thus creates a professional looking layout. The wrap-around effect is created using the align attribute with the img element.

The following examples will illustrate. (For demonstrational purposes, the width of the boxes containing the results represents the width of available space on your web page):

Example 1 - SOURCE CODE

<p>
<img src="mycoolpic.gif" align="left">...some text...
</p>

Example 1 - RESULT

This image's align attribute is set to left. The image 'floats' to the left as the text wraps around the right of the image. It will continue to do so as long as the block element which contains both the image and the text is not terminated by its end tag. As the text continues past the bottom border of the image, it re-aligns itself with the original left margin.

Example 2 - SOURCE CODE

<p>
<img src="mycoolpic.gif" align="right">...some text...
</p>

Example 2 - RESULT

This image's align attribute is set to right. The image 'floats' to the right as the text flow wraps around the left of the image.

Line breaks can be created using the br element. As the text continues past the bottom border of the image, it flows as it would normally to the original right margin.

Example 3 - SOURCE CODE

<p>
<img src="mycoolpic.gif" align="left">...some text... <br clear="all">...some more text clearing the bottom...
</p>

Example 3 - RESULT

Here's another example of an image's align attribute set to left. The image 'floats' to the left as the text flow wraps around the right. Using the br element with the clear="all" attribute-value pair you can cause the text that follows to continue on the first line that clears the bottom of all floating objects (in this case, mycoolpic.gif).

Three other values that you can use with align attribute are: top, middle and bottom which control the layout of your graphic with respect to the current text line or baseline. (The baseline is the imaginary horizontal line that your text rides on.) The following examples will illustrate:

Example 4 - SOURCE CODE

<img src="mycoolpic.gif"
    align="top, middle, or bottom">

Example 4A - RESULT

This image's align attribute is set to top. The text aligns with the top of the image.

Example 4B - RESULT

This image's align attribute is set to middle. The text aligns with the vertical center line of the image.

Example 4C - RESULT

This image's align attribute is set to bottom. The text aligns with the bottom of the image or more specifically the image rides on the baseline of the text. This is the default setting when no align attribute is declared in the <img> tag.

White Space Around Graphics

Well that's all very fine and well, you may say, but when I align my image to the left I don't want the text crammed right up against the edge of my graphic like that. Can I do something about that?

You sure can! Using the hspace and the vspace attributes you can control how much blank space or white space to display around your images. The following examples illustrate:

Example 5 - SOURCE CODE

<p>
...some text... <img src="mycoolpic.gif" align="left" hspace="20" vspace="30"> ...some more text...
</p>

Example 5 - RESULT

This image has its align attribute set to left which floats the image to the left and causes the text to wrap around the right. In addition to this, the hspace and the vspace attributes are used whose values represent lengths in pixels. The hspace attribute defines how much white space to allot on either side of the image while the vspace attribute defines how much white space to allot on the top and bottom of the image. In this example, 20 pixels of white space border on the left and right side of the image respectively while 30 pixels of white space border on the top and bottom of the image.

And last but certainly not least, if you simply want to align your graphic in the center of the page without wrapping any text around it, place your <img> tag within the <center>...</center> tags:

Example 6 - SOURCE CODE

...some text...
<center><img src="mycoolpic.gif" vspace="10"></center>
...some more text...

Example 6 - RESULT

This image is placed in the center of the page using the center element. The text does not wrap around the image. All text that appears before the <img> tag in the source code will be displayed on top of the image. All text that appears after the <img> tag in the source code will be displayed below the image. You can use the vspace attribute to implement some fine control of the white space on the top and bottom of the image.

NOTE:

In all of the above examples I have omitted using the alt, width and height attributes for the purposes of clarity. This is not in any way, shape or form meant to diminish their importance. See Using Graphics - Accessibility for more information.

If you've done any amount of surfing on the internet, you are probably aware that you can also use images to wallpaper the background of your entire web page. This technique along with setting the background color of your web page without using images will be covered next...