Image Border and Alignment
Let's have a look at image borders and alignment. Some may
be flattering effects, others not so flattering. This is useful alignment
for pictures and text.
The border
By default, images do not have borders surrounding them.
However, this is not the case if the image is placed within an <A>
tag. Here, the image would be given a border to let the user know that the
image is a link that can be clicked on. You may or may not want, using the
BORDER attribute can help you make your images appear the way you want
them to.
The value of the BORDER attribute indicates the thickness
of the border drawn around an image. Set the value to zero to turn borders
off. For example, below shows the same image with borders set to one, two,
and five-pixels:
A little border can be a subtle effect, but a lot of
border enhancement can achieve an undesirable effect. Notice, the border
becomes part of the image for alignment, shifting the image up as it gets
thicker.
Most often, the BORDER attribute is used to turn off
borders within <A> tags, particularly when the images appear as a
series of buttons. You may find it useful to place a border around an
image that requires one to help separate it from the surrounding text.
Image alignment
When placed into the current line of text, your browser
will treat the image as just another character in the text. You can
control how an image is placed into the text flow by using the ALIGN
attribute.
The values of this attribute, and the resulting alignment
effects, are established by using these various methods:
-
top: Aligns the top of the image with the top
of the text line, which may include other images on the same line.
-
middle: Aligns the middle of the image to the
baseline of the text (Netscape) or to the middle of the text (Internet
Explorer).
-
bottom and baseline: Aligns the bottom of the
image with the baseline of the text line.
-
texttop: Aligns the top of the image to the
top of the text in the current line, ignoring other images which may
extend above the top of the text in the current line. This is the
default alignment in align is not specified.
-
asbmiddle and center: Aligns the center of
the image with the center of the text line.
To see how your browser handles these alignment
attributes, here is an image with text aligned in various ways:
| top |
text here text
here
|
| middle |
text heretext
here
|
| bottom |
text heretext
here
|
| baseline |
text heretext
here
|
| texttop |
text heretext
here
|
| absmiddle |
text heretext
here
|
| center |
text heretext
here |
Note: Browser variations in handling image alignment make
it difficult to do much more than choose between top, bottom, and middle.
These alignment options only cover cases where you will be
including an image in a line of text. You will find more often, you
will want to insert an image in a text flow, wrapping the text around it.
<< BACK
Index: Website Creation
Resource Guide To - Designing & Maintaining Your
Website
Index
1: About Image Attributes / Image Galleries