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