Alignment with Text

As you see, this image does not start a new line. That means that the <img> element puts pictures in line with the text flow. Notice that the bottom of the picture is aligned with the baseline of the text (the common horizontal line for all the letters). You can change this alignment with the vertical-align style property.

In the following example, I have placed the picture in a folder named screenshots with the name w3book.png. You may save the picture in the same directory as your HTML files (right-click the image to do this), or put it in any directory you like. When you try your commands, you just have to make sure you put in the proper relative URL for the src attribute.

Put the following lines into your HTML file. The baseline value for the vertical-align property is the default value.

This <img src="w3book.png" width="49" height="61"
   style="vertical-align: baseline"
   alt="book with W3C on cover" /> is my book.

If you substitute the following values instead of baseline, you will see that the alignment of the image relative to its surrounding text changes accordingly.

Value of vertical-align	Result
baseline	This is my book.
bottom	This is my book.
middle	This is my book.
top	This is my book.

Yes, there is a difference between baseline and bottom. Notice that, when vertical alignment is at the bottom, the bottom of the book is below the tail of the letter “y”; with baseline, the bottom of the book is not below the tail of the “y.”

You can see a complete list of possible values for vertical-align in the CSS specification.

Wrapping Text Around an Image

By adding the style style="float: left" to an image, you tell the browser to take the image out of the flow and put it at the left side of the browser window. For the following example, use this image: . In the following examples, I have placed the image in the screenshots subdirectory with the name mini_img.png. Change the URL to reference the place where you have saved the image. Try this and see what it looks like.

<p>
This is text before an image. The image, which is left aligned, is a
small yellow rectangle,
<img src="screenshots/mini_img.png" style="float: left"
    alt="sample image" width="100" height="44" />
which contains a red circle and a deep turquoise square. Because the
image has been left-aligned, you won&#8217;t see it in the middle of the
text. Instead, it will go to the left side of the window, and the text
will &#8220;close up&#8221; You won&#8217;t see the picture between
the words <em>rectangle</em> and <em>which</em>.
The text will appear to wrap around the image.</p>

Now, replace the word left with right everywhere in the example and try it again.

Stopping Text Wrap

Now try this example:

<p>Here is a left-aligned image.
<img src="screenshots/mini_img.png" style="float: left"
    alt="sample image" width="100" height="44" />
Text wraps around it.</p>
<p>Here is another image at the right.
<img src="screenshots/w3book.png" style="float: right"
    alt="book with W3C on cover" width="49" height="61" />
Text wraps around it as well.</p>
<p>The end.</p>

Here is the result:

It looks like this because all the text is collapsed into the flow. What you really want is three separate sections. You want the text for the “image at right” separately from the area with the left-aligned image, and you want “The end” to display separately from the area with the right-aligned image. You do this by adding a line break with a style="clear: left" attribute. The first <br /> in the following code says, “begin a new line for text when the left side of the screen has no graphics on it (when it’s clear of graphics).” The second <br /> says, “begin a new line for text when the right side of the screen is clear of any graphics.” Try it and see.

<p>Here is a left-aligned image.
<img src="screenshots/mini_img.png" align="left"
    alt="sample image" width="100" height="44" />
Text wraps around it.</p>
<br style="clear: left" />
<p>Here is another image at the right.
<img src="screenshots/w3book.png" align="right"
    alt="book with W3C on cover" width="49" height="61" />
Text wraps around it as well.</p>
<br style="clear: right" />
<p>The end.</p>

Spacing Around an Image

As you have seen when you tried the examples (you did try them, didn’t you?) the text comes right up to the borders of the image. If you want to add horizontal and vertical space around the image, add an extra property specifier for margin-left, margin-right, margin-top, or margin-bottom. For example, in the example with lots of text, change style="float:left" to style="float:left; margin-right:5px" to add 5 pixels of space between the image and the text. You must use the px to specify pixels. You will learn more about margins and other spacing specifications later in the course.

Placing a Border Around an Image

You may place a border around an image by using markup like this:

<img src="screenshots/mini_img.png"
    style="border: 1px solid black;"
    alt="sample image" width="100" height="44" />

The 1px tells the width of the border; the solid gives the border style (you will find out later that there are other kinds of borders), and, of course, black gives the color.

Centering an Image

Everyone tries something like this, and then complains that it doesn’t center the image in the middle of the window:

<img src="screenshots/mini_img.png"
    style="text-align: center"
    alt="sample image" width="100" height="44" />

The <img> element does not use style="text-align: center". Period. And style="vertical-align: middle" does not do what you want either. Instead, you must place the image inside a <div> and center its content:

<div style="text-align: center">
<img src="screenshots/mini_img.png"
	alt="sample image" width="100" height="44" />
</div>