vertical-align :
baseline |
sub |
super |
top |
text-top |
middle |
bottom |
text-bottom |
percentage |
length
Compatibility: IE4+ N4+
Version: Level 1/Expanded in Level 2
Inherited: No
The vertical-align property allows a wide variety of choices
for aligning characters, letters, words, and text with regard to the
baseline of a selected line of characters, letters, words, or text.
baseline Level 1
The baseline value is the default. It aligns the selected text
to the baseline (bottom) of a line. By declaring baseline, you
can ensure that any previous declaration will not effect a selected
text.
bottom Level 1
The bottom value aligns selected characters, letters, words,
or text with the lowest character on the same line.
length Level 2
The length values raises or lowers the element above or below the baseline by the specified amount.
A positive value raises and a negative lowers.
A value of zero is the baseline.
You can use any of the following seven units.
Use the abbreviation.
| Length |
Abbrev. |
| centimeters |
cm |
| ems |
em |
| inches |
in |
| millimeters |
mm |
| picas |
pc |
| pixels |
px |
| points |
pt |
middle Level 1
The middle value aligns selected characters, letters, words,
or text with the mid-point (middle) of the same line.
percentage Level 1
The percentage value is based upon the line height. The bottom
of the line (baseline) is designated 0% and the top is 100%. The percentage
can be positive or negative and can exceed 100% in magnitude. A negative
percentage aligns below the baseline and a positive above.
sub Level 1
The sub value places selected characters, letters, words, or
text as a subscript.
super Level 1
The super value places selected characters, letters, words,
or text as a superscript.
text-top Level 1
The text-top value aligns selected characters, letters, words,
or text with the tallest character on a selected line.
text-bottom Level 1
The text-bottom value aligns selected characters, letters,
words, or text with the tallest character on a selected line.
top Level 1
The top value aligns selected characters, letters, words, or
text with the tallest character on the same line.
Code:
img { vertical-align: baseline; }
img { vertical-align: sub; }
img { vertical-align: super; }
img { vertical-align: top; }
img { vertical-align: text-top; }
img { vertical-align: middle; }
img { vertical-align: bottom; }
img { vertical-align: text-bottom; }
img { vertical-align: -50%; }
img { vertical-align: 125%; }
img { vertical-align: -5px; }
img { vertical-align: 10mm; }
or
img.tp { vertical-align: top; }
img.md { vertical-align: middle; }
img.bt { vertical-align: bottom; }
...
<b>The Guru</b> <img class="tp" src="images/guru.gif">
<p>
<b>The Guru</b> <img class="md" src="images/guru.gif">
<p>
<b>The Guru</b> <img class="bt" src="images/guru.gif">
Output:
The Guru 
The Guru
The Guru
Copyright 1999-2001 by Infinite Software Solutions, Inc. All rights reserved.
Trademark Information
|