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 
The Guru
The Guru
Language(s): CSS2
See Also:
