Aligning Images

Similarly to text, images can be aligned on the page using special attributes. Not only can you align images horizontally, but you also can align them vertically with respect to text and other images that surround them.

Horizontal Image Alignment

As discussed in Hour 5, "Basic Text Alignment and Formatting," you can use <div style="text-align:center"> , <div style="text-align:right"> , and <div style="text-align:left"> to align an element to the center, right margin, or left margin. These style settings affect both text and images, and can be used within the <p> tag as well.

For example, the first <img /> tag in Listing 8.2 occurs between the <p style="text-align:center"> tag and the closing </p> tag. This causes the title image to be centered on the page. Like text, images are normally lined up with the left margin unless a style="text-align:center" or style="text-align:right" setting indicates that they should be centered or right-justified. In other words, left is the default value of the text-align style property.

As the final four images in Listing 8.2 and Figure 8.3 demonstrate , you can also use style="text-align:center" to center more than one image at a time. Because there are no <br /> or <p> tags between them, the four thumbnail images all appear on one line and the entire line is centered horizontally in the browser window.

You can also make text wrap around images, in which case you use the float style property directly within the <img /> tag. Following is an example of how you might do this:

<img src="fish.jpg" alt="A Fish" style="float:left" />
<img src="turtle.jpg" alt="A Turtle" style="float:right" />

<img style="float:left" /> aligns the image to the left and causes text to wrap around the right side of it, as you might expect. Similarly, <img style="float:right" /> aligns the image to the right and causes text to wrap around the left side of it. There is no concept of floating an image to the center because there would be no way to determine how to wrap text on each side of it.

By the Way

The float style property is actually more powerful than I've let on here, and in fact applies to more than just images. You can use the float style property creatively to arrive at some interesting page layouts, as you'll find out later in Hour 14, "Using Style Sheets for Page Layout."

Vertical Image Alignment

Sometimes, you may want to insert a small image 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 that 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 style=" vertical-align :text-top" /> .
To line up the bottom of an image with the bottom of the text, use <img style="vertical-align:text-bottom" /> .
To line up the middle of an image with the overall vertical center of everything on the line, use <img style="vertical-align:middle" /> .
To line up the bottom of an image with the baseline of the text, use <img style="vertical-align:baseline" /> .

By the Way

The vertical-align style property also supports values of top and bottom , which can be used to align images with the overall top or bottom of a line of elements regardless of any text on the line.

All four of these options are illustrated in Listing 8.3 and Figure 8.5. The four pond thumbnail images are now listed vertically down the page, along with descriptive text next to each of them. Various settings for the vertical-align style property are used to align each image and its relevant text.

Figure 8.5. The newly modified Pond sample page listed in Listing 8.3, as it appears in a web browser.

Did you Know?

If you don't include any align attribute in an <img /> tag, the bottom of the image will line up with the baseline of any text next to it. That means you never actually have to type in style="vertical-align:baseline" because it is assumed by default. However, if you specify a margin for an image and intend for the alignment to be a bit more exacting with the text, you may want to explicitly set the vertical-align attribute to text-bottom . Take a look at the last image in Figure 8.5 to see what I'm talking about in regard to the text appearing slightly below the image due to the image marginthis is a result of the baseline setting for vertical-align .

Listing 8.3. Horizontal Alignment, Vertical Alignment, and Text Wrapping All Enter the Picture in This Example

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Michael's Pond</title>
  </head>

  <body>
    <p style="text-align:center">
      <img src="pondtitle.gif" alt="Michael's Pond" />
    </p>
    <p>
      My backyard pond is not only a fun hobby but also an ongoing home
      improvement project that is both creative and relaxing. I have numerous
      fish in the pond, all Koi from various places as far as Japan, Israel,
      and Australia. Although they don't bark, purr, or fetch anything other
      than food, these fish are my pets, and good ones at that. The pond was
      built in a matter of weeks but has evolved over several years through
      a few different improvements and redesigns. I still consider it a work in
      progress, as there are always things to improve upon as I continue to
      learn more about how the pond ecosystem works, how to minimize
      maintenance, and how to get a more aesthetically pleasing look.
    </p>
    <p>
      <a href="pond1.jpg"><img src="pond1_sm.jpg" alt="Pond Plants"
      title="Click to view larger picture." style="border-style:none;
      margin:2px; vertical-align:text-top"/></a>
      The Lotus, Floating Hyacinth, Japanese Lantern, and Waterfall All Add to
      the Drama of the Pond<br/>
      <a href="pond2.jpg"><img src="pond2_sm.jpg" alt="Fish Feeding Frenzy"
      title="Click to view larger picture." style="border-style:none;
      margin:2px; vertical-align:middle" /></a>
      Feeding Time is Always Full of Excitement<br/>
      <a href="pond3.jpg"><img src="pond3_sm.jpg" alt="Large Fish Having
      Dinner" title="Click to view larger picture." style="border-style:none;
      margin:2px; vertical-align:text-bottom" /></a>
      One of the Larger Fish Cruises for Dinner<br/>
      <a href="pond4.jpg"><img src="pond4_sm.jpg"
      alt="Hovering Dragonfly" title="Click to view larger picture."
      style="border-style:none; margin:2px; vertical-align:baseline" /></a>
      A Dragonfly Hovers Over the Lotus for a Quick Drink<br/>
    </p>
  </body>
</html>

Notice in the figure a subtle change that makes sense given that the text descriptions now appear alongside the images on the page. I'm referring to the new title attributes, which are now used to display the message Click to view larger picture for all the images. The required alt attributes now contain brief descriptions of each image.

This usage of the title attribute addresses the problem of some Web developers using the alt attribute simply to house tool tip text. The problem stems from the fact that some browsers display a pop-up (tool tip) containing the alt text. However, you can just as easily use the title attribute for this purpose, as is done in the example, and then use the alt attribute for its original intent of providing alternative text for the image. The bottom line is that it's a good idea to use both the alt and the title attributes with images whenever possible.

Try It Yourself

Try adding some images to your web pages now, and experiment with different values of text-align , vertical-align , and float . To get you started, here's a quick review of how to add a hypothetical fish image ( fish.jpg ) to any web page.

Copy the fish.jpg image file to the same directory folder as the HTML file.
With a text editor, add <img src="fish.jpg" alt="Fishy" /> where you want the image to appear in the text.
If you want the image to be centered, put <div style="text-align:center"> before the <img /> tag and </div> after it. To wrap text around the image instead, add style="float:right" or style="float:left" to the <img /> tag. And finally, use the vertical-align style property directly within the <img /> tag to control the vertical alignment of the image with respect to other images and text next to it.
If you have time for a little more experimentation, try combining multiple images of various sizes with various vertical alignment settings.