Image Alignment

Image alignment is a phrase used to describe the position of an image with respect to other text or content.

Placing images into web pages is different from placing them into a standard word processing or page layout program. With many word processing or page layout programs, images can be placed almost anywhere on the page, with text flowing around them, under them, or over them. This is not true with images in web pages.

The default positioning of an image is on the same "line" as the rest of the text around it. For example:

Here is a line of text that has been "pushed down" because the picture is taller than the line. This is the "default" state of a picture that you place into your page. JPEG example

GIF example If you want your text to flow around the image, you may specify the alignment of the image to be "left" or "right." In this paragraph, you can see that the picture "sticks" to the left side of the content area, and this paragraph (and subsequent paragraphs) flows around it.

To change the alignment of an image, double-click on the picture and change the alignment dropdown.

Alignment options:

left - pushes picture to left, text flows to the right
right - pushes picture to right, text flows around the left
center - doesn't work for most browsers
middle - sets the line of text to run along the middle of the image (see below)
texttop - sets the line of text to run along the top of the image (see below)
bottom - sets the line of text to run along the bottom of the image (see below)
absbottom - sets the bottom of the image to be even with the "absolute bottom" of the line of text (see below)

This image has alignment set to middle: JPEG example Notice that the text runs along the middle of the image, and any text that spills over to the next line will be below the image.

This image has alignment set to "texttop." JPEG example The text runs along the top of the image.

JPEG example This image has alignment set to baseline. ("Bottom" produces the same effect.) This means that the bottom of the image runs along the same line as the line of text.

This image has alignment set to absbottom, JPEG example which sets the image to the absolute bottom of the line of text -- that is, to the bottom of where "g," "p," and other "dangling" letters (as opposed to lining it up with the bottoms of "m," "s," or "c").