Creating a Website: The Missing Manual, 3rd Edition

Images and Styles

The <img> element supports a few optional attributes you can use to control an image’s alignment and borders. But in the modern world, these attributes are obsolete, and you won’t use them in this book. Instead, you’ll learn the best way to position images—with style sheet rules.

The following sections describe your image-alignment options, and help you practice some of the style sheet smarts you picked up last chapter.

Inline Images in Text

If you don’t take any extra steps, a browser inserts every image right into the flow of HTML text. It lines up the bottom of a graphic with the baseline of the text that surrounds it, as shown in Figure 7-6. (The baseline is the imaginary line on which a line of text sits.)

Figure 7-6. Usually, you don’t want a picture inside an ordinary line of text (unless it’s a very small emoticon, like the ones you find in instant message programs). You can use paragraphs, line breaks, or tables to do a better job of separating images from your text.

You can change the vertical alignment of text using the vertical-align property. Specify a value of top, middle, or bottom, depending on whether you want to line the picture up with the top, middle, or bottom of the line of text.

Here’s an example of an inline style that uses the vertical-align property to line a picture up with the top of the line of text.

<img src="happy.gif" alt="Happy Face" style="vertical-align: ...