The address for this web page is:   http://www.onemathematicalcat.org/day_15_image_align.htm
On to the next lesson!
Back to the COURSE SYLLABUS

15. ALIGNING IMAGES

INDEX CARD #15:

ALIGNING IMAGES (15a)

ALIGNMENT refers to how a graphic is positioned in relation to the flow of text. It is controlled by the ALIGN attribute in the <IMG> tag.
VERTICAL ALIGNMENT:

<IMG SRC="tigger.gif"> bottom of image aligned with text (default)

<IMG SRC="tigger.gif" ALIGN=middle> middle aligned with text

<IMG SRC="tigger.gif" ALIGN=top> top of image aligned with text

WRAPPING TEXT (15b)

Horizontal alignment can be used to push an image to either the left or right margin, and let text flow around it. By using the HSPACE (Horizontal SPACE) and VSPACE (Vertical SPACE) attributes, you can prevent your text from "bumping up against" the image:

<IMG SRC="tigger.gif" ALIGN=left HSPACE=10 VSPACE=20> Notice how the graphic is placed along the left margin of the page, and text flows around it. There are 10 pixels of space to the left and right of the image; there are 20 pixels of space above and below. It's not possible to specify an amount of space along a particular side of an image. You can stop the text wrap and have text resume below the image by inserting <BR CLEAR=all>. This says, roughly, "resume the text when ALL the margins are clear."
<IMG SRC="tigger.gif" ALIGN=right HSPACE=40> Notice how the graphic is placed along the right margin of the page, and text flows around it. There are 40 pixels of space to the left and right of the image.

Printable version of Index Card 15a

Printable version of Index Card 15b

WORKSHEET #15:

ASSIGNMENT #15:

On to the next lesson!
Back to the COURSE SYLLABUS
© 2000 Carol J.V. Fisher    All Rights Reserved