Web Design & Development
[ Web Design & Development Topics ]
Image alignment defines where an image is to appear on the page relative to other page content. This has to do with not only where it appears on the page (left, right, center) but how other stuff such as text wraps around it.
- Default generally specifies a baseline alignment.
- Bottom align the baseline of the text to the bottom of the selected object.
- Top aligns the top of an image to the top of the tallest item in the current line.
- Middle aligns the middle of the image with the baseline of the current line.
- Left places the selected image on the left margin, wrapping text around it to the right.
- Right places the image on the right margin, wrapping text around the object to the left.
A few others that exist but have never been a part of a standard (basically don't use them, but it may be useful to know they exist):
- Absolute Middle (absmiddle) aligns the middle of the image with the middle of the text in the current line.
- Absolute Bottom (absbottom) aligns the bottom of the image with the bottom of the line of text.
- TextTop aligns the top of the image with the top of the tallest character in the text line.
Here is a sample of text and an image using right alignment: 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
The source code looks like this:
<img src="../images/little.jpg" alt="Image of Anne" width="75" height="85" border="2" align="right">
Note: I opted to put a border around this image using the "border" command above. If I had not put in the border at all the default would have been no border (aka, border="0")
Lets say you want to have some extra space around the image so the text or whatever does not butt up right next to it. To accomplish this you will use vspace or hspace like this:
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah blah blah blah
The source code looks like this:
<img src="../images/little.jpg" alt="Image of Anne" width="75" height="85" hspace="8" vspace="8" border="2" align="right">