Images can be positioned in several ways, but here you will see how to use
the align attribute to control their position. This does not cover all
possible combinations of alignment, but the most basic ones.
The align attribute is used to define where the image appears relative
to the element in which it is contained. In these examples, I show how it
affects where an image is placed relative to paragraph elements. As you can
see, the image is to the right of all of the text of this paragraph. Look at
the source code and you will see that the image element is placed at the
beginning of the paragraph, but it is not positioned before any of the text
because it has the attribute
align="right"
which forces it to the right of the text.
If there is a lot of text, it will wrap under the bottom of the image when
the amount of text fills up the space to the left of the image. Narrow the
browser's window to see this effect if this is not wrapping under the image.
If the image element is given the attribute
align="left"
then the image will be placed to the left of the text of the enclosing
paragraph text.
The rest of this paragraph is just filler so you can see how the text
stays to the right of the image.
Blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah.
Images can also be given top and bottom alignment. The default is bottom
alignment. If an image is placed in the middle of a paragraph and it is
given
align="top"
then it will appear between the words of the text in which the image tag
is placed, with its top lining up with the tops of the words on that line.
The image is placed in the text here:
and these words follow it. Notice how no text will appear to the left or
right of the image but only above and below it.
There is no wrapping of the text around it.
The image in this paragraph is given bottom
alignment. If an image is placed in the middle of a paragraph and it is
given
align="bottom"
then it will appear between the words of the text in which the image tag
is placed, with its bottom lining up with the bottoms of the words on that line.
The image is placed in the text here:
and these words follow it. Notice how no text will appear to the left or
right of the image but only above and below it.
There is no wrapping of the text around it.