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
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.
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
All four of these options are
Figure 8.5. The newly modified Pond sample page listed in Listing 8.3, as it appears in a web browser.
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
This usage of the
attribute addresses the problem of some Web developers using the
attribute simply to house tool tip text. The problem
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.