CSS2 » Properties » vertical-align

Version: Level 1/Expanded in Level 2

Compability: IE4+  N4+

Syntax:
vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage | length
top (Level 1)
The top value aligns selected characters, letters, words, or text with the tallest character on the same line.
text-bottom (Level 1)
The text-bottom value aligns selected characters, letters, words, or text with the tallest character on a selected line.
text-top (Level 1)
The text-top value aligns selected characters, letters, words, or text with the tallest character on a selected line.
super (Level 1)
The super value places selected characters, letters, words, or text as a superscript.
sub (Level 1)
The sub value places selected characters, letters, words, or text as a subscript.
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.
middle (Level 1)
The middle value aligns selected characters, letters, words, or text with the mid-point (middle) of 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
bottom (Level 1)
The bottom value aligns selected characters, letters, words, or text with the lowest character on the same line.
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.

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. This property is not inherited.

Examples

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; }
Language(s): CSS2
Code:
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 Devguru logo

The Guru Devguru logo

The Guru Devguru logo

Language(s): CSS2

See Also: