HTML Basics:
Align & Space Images

español
Did you want IE9+, Chrome, Firefox; Notepad?

You might reasonably expect that the text on a web page would just wrap around an image. It is not that simple.

You must add the ALIGN attribute to the IMG tag to make the text wrap around an image. The tag might look something like:

<img src="fish.gif" align="left" width="50" height="50">

Image aligned left makes text wrap.

Alignment

Anchors

In FPX, if an image has the align attribute, there is a black bar, called an anchor, on the line before the text starts. This line does not show in a browser or in print. Sometimes it is helpful to drag the image to a new location by dragging this anchor instead of dragging the image itself.

Aligning an image:

The table below shows the values for ALIGN that you will use the most for images. There are some other values, but in most situations the results are the same as with one of values listed.

The values allowed for aligning an image are not the same values as ALIGN has for paragraphs. It's a bit confusing at first.

Value:	Effect:	How it looks in IE:
left	Places the image on the left margin and wraps text around it on the right
right	Places the image on the right margin and wraps text around it on the left
top	Aligns top of image with the top of the tallest thing on the line
middle	Aligns the bottom of the text line with the middle of the image
bottom	Aligns the bottom of the image with the line that the text is on, which is called the baseline. Default value.

Centering

Did you notice that there is no value that will center the image horizontally? To do that you must center the paragraph that contains the image. Yes, it's a bit awkward.

Spacing

In the examples in the table above, the image bumps right into the text. A little blank space around the image would keep it from feeling so crowded.

You can add blank space around an image with two attributes in the <IMG> tag. The space is measured in pixels.

HSPACE sets horizontal space = to the left and right of the image.

VSPACE sets vertical space = above and below the image.

Example, setting both hspace and vspace:

<img src="fish.gif" align="left" hspace="10" vspace="15" width="50" height="50">

Adding space around an image:

The table below shows how you can use these attributes to create white space around an image. In the example images, the picture of the fish is selected, so that the handles show at the corners and sides of the image. These handles (the small squares) show you exactly where the white space is.

~~  1 Cor. 10:31 ...whatever you do, do it all for the glory of God.  ~~

Last updated: 30 Apr 2012