 |
|
|
Aligning Images & Text
This page covers:
Aligning Images & Text
Caveat Regarding These Tags
Aligning Images & Text
Aligning images on your page is relatively easy. You can left align, right align, or center your images on a page just like you can with text. You can also choose how you want your images to align with the text around it:
|
 Umper is 3 and a ½.
He's black and white and has quite a personality (more of a temperament really).
He hates other cats and thinks he's a dog -- when we walk to the grocery store, he chases us
almost all the way. He loves to eat tomatoes for reasons unknown
and unexplainable, and he loves to roll in fresh laundry when it's nice and warm.
|
<IMG SRC="examples/images/umper.jpg" ALIGN="LEFT"> |
|
The code in red is what you need to add to your image tag. The image aligns to the left, and the text wraps around it. If your paragraph is long enough, it will wrap itself under the picture as well. |
|
Umper is our 3 and a ½ year old cat.
He's black and white and has quite a personality (more of a temperament really).
He hates other cats, thinks he's a dog, and chases you almost all the way when
you're walking to the grocery store. He loves to eat tomatoes for reasons unknown
and unexplainable, and he loves to roll in warm laundry and gets black fur all over
my clean clothes. |
|
<IMG SRC="examples/images/umper.jpg" ALIGN="RIGHT">
|
|
The code in red is what you need to add to your image tag. Here the image aligns to the right, and the text wraps around it. If your paragraph is long enough, it will wrap itself under the picture as well. |
|
Umper is our 3 and a ½ year old cat.
He's black and white and has quite a personality (more of a temperament really).
He hates other cats, thinks he's a dog, and chases you almost all the way when
you're walking to the grocery store. |
|
<IMG SRC="examples/images/umper.jpg" ALIGN="TOP">
|
|
The code in red is what you need to add to your image tag. Here the image aligns to the left and the text aligns to the top. However, with this tag and the 2 below, only the first line of text aligns according to the tag, and the rest of the text goes underneath. |
|
Umper is our 3 and a ½ year old cat.
He's black and white and has quite a personality (more of a temperament really).
He hates other cats, thinks he's a dog, and chases you almost all the way when
you're walking to the grocery store. |
|
<IMG SRC="examples/images/umper.jpg" ALIGN="MIDDLE">
|
|
The code in red is what you need to add to your image tag. Here the image aligns to the left and the text aligns to the middle. However, with this tag, only the first line of text aligns according to the tag, and the rest of the text goes underneath. |
|
Umper is our 3 and a ½ year old cat.
He's black and white and has quite a personality (more of a temperament really).
He hates other cats, thinks he's a dog, and chases you almost all the way when
you're walking to the grocery store. |
|
<IMG SRC="examples/images/umper.jpg" ALIGN="BOTTOM">
|
|
The code in red is what you need to add to your image tag. Here the image aligns to the left and the text aligns to the bottom. However, with this tag and the 2 above, only the first line of text aligns according to the tag, and the rest of the text goes underneath. |
Caveat
I find that the ALIGN
attributes for the IMG element to be
unreliable sometimes. I've seen irregularities with these attributes, but can't recall the exact
circumstances and apologize for not being able to be more clear on this point.
I do know for certain that the ALIGN="BOTTOM", ALIGN="TOP", ALIGN="MIDDLE"
attributes do not work properly in Netscape if you're also using style sheets to
format your page (if you have Netscape 4.0 or above, you'll notice this on my page).
In HTML 4.0, these tags are also tags that are "deprecated" which means they are
in the process of being phased out. In future versions of browsers these tags may
no longer be supported (though I don't think this will be anytime soon). Style
Sheets are the wave of the future. The major browser companies have agreed that
layout of pages should be controlled with Style Sheets and not HTML. I highly
recommend that you learn to use Cascading Style Sheets. However, in the meantime,
while we wait for everyone to upgrade to a browser that can take advantage of CSS,
I suggest you learn to master tables for the layout of your pages.
Next Page: Linking Images & Adding Borders to Images
Previous Page: Adding Images to Web Pages
|
|
