HTML and CSS Reference
In-Depth Information
.
Output
FIGURE 9.7
Image alignment
options.
9
Wrapping Text Next to Images
Includingan image inside a line works fine if you have only one line of text. To control
the flow of text around an image, you need to use CSS or the
align
attribute of the
img
tag. Images are just like any other element as far as the float property goes, so you can
use the
float
and
clear
CSS properties to control text flow around them, as discussed in
the previous lesson. HTML5 Vdoes not support the
align
attribute, but all the browsers
that are currently in use do, and many people still use it.
align=“left”
and
align=“right”
align=“left”
aligns an image with the left margin, and
align=“right”
aligns an image
with the right margin. However, these attributes also cause any text that follows the
image to be displayed in the space to the right or left of that image, depending on the
margin alignment:
Input
▼
<p><img src=”tulips.gif” align=”left” /></p>
<h1>
Mystery Tulip Murderer Strikes
</h1>
<p>
Someone, or something, is killing the tulips of New South
Haverford, Virginia. Residents of this small town are
shocked and dismayed by the senseless vandalism that has
struck their tiny town.
</p>
<p>
