Aligning Text With Images

HTML treats images almost as if they were just another text character. If you want to, you can simply insert an image in the middle of a sentence. You can control how text surrounding an image is aligned vertically relative to the image by using the ALIGN= attribute of the IMG tag.

Following are some examples of vertical alignment of text. The text has been positioned by using the ALIGN attribute of the IMG tag. Alignment attributes can be displayed somewhat differently by different browsers. It's best to check.

ALIGN attribute values are shown in bold below:

Aligning with top (aligns the image with the top of the tallest text)

Aligning the text's baseline with the middle of the image.

Aligning the middle of the Largest letter using absmiddle.

Aligning the image's bottom edge with the text's baseline using bottom

Aligning the image's bottom edge with lowest descender (j) absbottom

Your Assignment:

1. Save this file as C07_yourlastname.html
2. If you have not done so already, download the image files that you will need for this and other exercises in this series following the instructions in A04_saveFiles1.html in the section named "To get the image files that you need for your exercises". The image file for the above image will be amongst the files provided.
3. Add top alignment to the following image:
4. I'm going to the top!
5. Save the file. View it in your browser.
6. Send me the file by email.

© 2008 Dan Vaughan