InformIT: Sams Teach Yourself HTML 4 in 24 Hours

Vertical Image Alignment

Sometimes, you may want to insert a small image right in the middle of a line of text; or you might like to put a single line of text next to an image as a caption. In either case, it would be handy to have some control over how the text and images line up vertically. Should the bottom of the image line up with the bottom of the letters, or should the text and images all be arranged so their middles line up? You can choose between these and several other options:

To line up the top of an image with the top of the tallest image or letter on the same line, use <img align="top" />.
To line up the bottom of an image with the bottom of the text, use <img align="bottom" />.
To line up the bottom of an image with the bottom of the lowest image or letter on the same line, use <img align="absbottom" />. (If there are some larger images on the same line, align="absbottom" might place an image lower than align="bottom".)
To line up the middle of an image with the baseline of the text, use <img align="middle" />.
To line up the middle of an image with the overall vertical center of everything on the line, use <img align="absmiddle" />. This might be higher or lower than align="middle", depending on the size and alignment of other images on the same line.

Three of these options are illustrated in Figures 10.4 and 10.5. The ZOLZOL's logo is aligned with the top of the photos on either side of it by using align="top"; the picture of the water planet uses align="middle" to line up the baseline of the words Sol III with the center of the Earth; and the little image of the moon is lined up in the exact center of the text around it using align="absmiddle".

TIP

If you don't include any align attribute in an <img /> tag, the image will line up with the bottom of any text next to it. That means you never actually have to type in align="bottom" because it does the same thing.

In fact, you probably won't use any of the vertical alignment settings much; the vast majority of Web page images use either align="left", align="right", or no align attribute at all. Don't worry about memorizing all these options—you can always refer to this book if you ever do need them.

Figures 10.6 and 10.7 show a few more examples of using horizontal and vertical alignment tags.

Figure 10.6 You can control the vertical alignment of images with the align attribute.

Figure 10.7 The top, middle, and bottom of each line depends on the size of the text and images on that line. Notice that the words "Friendly Fen" Zol and "Honest Han" Zol are actually two small image files, not text.

To Do

Try adding some images to your Web pages now, and experiment with all the different values of align, To get you started, here's a quick review of how to add the magic hat image to any Web page. (See the "To Do" section at the beginning of this hour for help downloading the magic hat image.)

Copy the magic.gif image file to the same directory folder as the HTML file.
With a text editor, add <img src="magic.gif" /> where you want the image to appear in the text.
If you want the image to be centered, put <div align="center"> before the <img /> tag and </div> after it. To wrap text around the image instead, add align="right" or align="left" to the <img /> tag.

If you have time for a little more experimentation, try combining multiple images of various sizes (such as the stars and the magic hats) with various vertical alignment settings.

Summary | Next Section

Previous Section