Wrapping Text Around an Image
<img align=left> aligns an image to the left side of the page
<img align=right> aligns an image to the right side of the page
<img align=top> aligns text along the top of an image
<img align=bottom> aligns text along the bottom of an image
<img align=middle> aligns text to the middle of an image
It's been said that a picture's worth a thousand words, but you
shouldn't believe everything you hear. Pictures are nice and all, but
chances are you'll want to have some words with them. Here's how to
put them together....
There are several techniques for wrapping text around pictures, and
they're controlled through the <img align> tags. For
starters, you can align an image down the left or right side of a page
and let the text flow around it.
So, for instance, you can lead a paragraph off with the image,
aligned left:
<p><img align=left src="stuff/bug.gif">
This is an ant, sitting on his butt. Some days he sits on his butt for
hours upon hours, letting the other ants do all the work. Some people
(and ants) would say he is lazy. But the truth is that this ant thinks
he's a penguin, in which case it would be OK to sit on his tookus all
day while the other ants (or penguins, in his world) scurry around
securing food for the winter.
The text will begin at the top of the image and flow down its
right-hand side:
 This is an ant, sitting
on his butt. Some days he sits on his butt for hours upon hours, letting
the other ants do all the work. Some people (and ants) would say he is
lazy. But the truth is that this ant thinks he's a penguin, in which
case it would be OK to sit on his tookus all day while the other ants
(or penguins, in his world) scurry around securing food for the
winter.
But sometimes you'll want the text to begin above the image and
wrap around it. In this case, you can integrate the image into the
paragraph:
<p> This is an ant, sitting on his butt. Some
days he sits on his butt for <img align=left
src="stuff/bug.gif"> hours upon hours, letting the other ants do
all the work. Some people (and ants) would say he is lazy. But the truth
is that this ant thinks he's a penguin, in which case it would be OK to
sit on his tookus all day while the other ants (or penguins, in his
world) scurry around securing food for the winter.
And the image will appear on the left-hand side, beginning at the
first line after it was inserted. The text will wrap around
it:
This is an ant, sitting on his butt. Some days he sits on
his butt for hours upon hours,
letting the other ants do all the work. Some people (and ants) would say
he is lazy. But the truth is that this ant thinks he's a penguin, in
which case it would be OK to sit on his tookus all day while the other
ants (or penguins, in his world) scurry around securing food for the
winter.
<img align=right> works the same way, and will look like
this:
This is an ant, sitting
on his butt. Some days he sits on his butt for hours upon hours,
letting the other ants do all the work. Some people (and ants) would say
he is lazy. But the truth is that this ant thinks he's a
penguin....
There's no way to align an image in the center of the page and have
text wrap around both sides. You can, however, center an image in the
page and have the text run below it. To do this, you'll need to
use the paragraph alignment tag, rather than the image
alignment tag, as well as a line break.
So this HTML:
<p align=center><img
src="stuff/bug.gif"> <br> This is an ant, sitting on his
butt. Some days he sits on his butt for hours upon hours, letting the
other ants do all the work.
Will look like this:
This is an ant, sitting on his butt. Some days
he sits on his butt for hours upon hours, letting the other ants do all
the work.
But we still have a few tricks up our sleeve: If you'd like a
single line of text to appear next to the image, and the rest to drop
below it, you can use the <img align=top>, <img
align=middle> and <img align=bottom>tags.
<img align=top> looks like this:
This is an ant, sitting
on his butt. Some days he sits on his butt for hours upon hours,
letting the other ants do all the work. Some people (and ants) would say
he is lazy. But the truth is that this ant thinks he's a penguin, in
which case it would be OK to sit on his tookus all day while the other
ants (or penguins, in his world) scurry around securing food for the
winter.
<img align=bottom> looks like this:
This is an ant,
sitting on his butt. Some days he sits on his butt for hours upon
hours, letting the other ants do all the work. Some people (and ants)
would say he is lazy. But the truth is that this ant thinks he's a
penguin, in which case it would be OK to sit on his tookus all day while
the other ants (or penguins, in his world) scurry around securing food
for the winter.
And <img align=middle> looks like this:
This is an ant,
sitting on his butt. Some days he sits on his butt for hours upon
hours, letting the other ants do all the work. Some people (and ants)
would say he is lazy. But the truth is that this ant thinks he's a
penguin, in which case it would be OK to sit on his tookus all day while
the other ants (or penguins, in his world) scurry around securing food
for the winter.
These rules may seem a little tiresome to memorize, but as long as
you understand the concepts, you'll do just fine. And hey, there's no
shame in looking things up. If memorization just ain't your thang, you
can always bookmark this page for future reference.
I hope this came in useful!
Ask in the forum
if you have any suggestions or comments.
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
