Element content is typically vertically centered on a rendered line (with
extra line-height amounts distributed equally on the top and bottom.)
This property allows in-line content boxes to be vertically aligned with
respect to several different criteria on a rendered line.
Allowed Values
inherit
[CSS2] [N6|O4]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
baseline|middle
[CSS1|CSS2]
[IE4|N4|O3.5]
Type: Calculated
Description: baseline - Aligns the baseline of the current element with the
baseline of the parent element box. If the current element does not have a
baseline, the bottom of the current element's box should be used. middle - Aligns the vertical midpoint of the current element box
with the baseline plus half the x-height of the parent.
top|bottom
[CSS1|CSS2]
[IE4|N4|O3.5]
Type: Explicit
Description: top - Aligns the top of the current element with the top of
the tallest element on the currently rendered line. bottom - Aligns the bottom of the current element with the
bottom of the lowest element on the currently rendered line.
text-top|text-bottom
[CSS1|CSS2]
[IE4|N4|O3.5]
Type: Calculated
Description: text-top - Aligns the top of the current element with the top
of the parent element's font. text-bottom - Aligns the bottom of the current element with the
bottom of the parent element's font.
super|sub
[CSS1|CSS2]
[IE4|N6|O3.5]
Type: Calculated
Description: super - The baseline of the current element box is aligned to
the baseline of other superscripted elements in the parent element's box. sub - The baseline of the current element box is aligned to the
baseline of other subscripted elements in the parent element's box.
[length]
[CSS2]
[IE6|N6|O3.5]
Type: Explicit
Description:
This specifies an exact distance to raise or lower the current element
from the default 'baseline' value. Positive values are above the baseline,
while negative values are below.
[percentage]
[CSS1|CSS2]
[IE6|N6|O3.5]
Type: Calculated
Description:
This specifies a distance to raise or lower the current element from the
default 'baseline' value. Positive percentages are above the baseline, while
negative values are below. The percentage value is relative to the current
element's 'line-height' property.
Example
Ext/Doc: img.left
{ vertical-align: top }
In-Line: <imgSTYLE="vertical-align:
top" SRC="image.gif"
ALT="This is a stylish image">
Notes
CSS2: "When this property is used with tables, the values have slightly
different meanings."
Browser Peculiarities
Internet Explorer
4.0:
- 'sub' and 'super' are ignored for form fields and images.
4.x Mac:
- Reported elsewhere: IE 4.x for the Macintosh
has mostly-correct support (at least one known glitch) for the values
'sub|super|top|text-top|middle|text-bottom|bottom|baseline' for text
and images. It is unknown how this applies to form fields in these
versions.
4.0+:
- Only the 'sub' and 'super' values are honored for text content.
'Baseline' may also be supported, but all unsupported vertical-align
values appear to be rendered as 'baseline' should be.
- For form fields and images, the 'middle', 'text-top' and
'text-bottom' values have an effect, but the result is not what
is expected ('text-bottom' is like 'baseline', and 'text-top'
is higher than the top of the tallest font on the line.)
5.0+:
- 'sub' and 'super' are applied only to the text within form text
fields (input type=text|password) and button widgets (input
type=button|reset|submit.) For the Button element, only the value
'super' has any visible effect.
Netscape
4.x:
- This property only has an effect on images. Values of 'top',
'text-bottom' and 'baseline' appear to be supported. Values of
'text-top', 'middle', and 'bottom' are recognized but appear to
be incorrectly calculated.
Opera
3.5+:
- This property has no effect on form fields.
- For inline and image elements, the value 'middle' is not computed
correctly.
- For images, 'text-top' and 'text-bottom' produce unexpected results.
- Vertical-align percentage calculation is not computed correctly.
- Reported elsewhere: There are "problems with
vertical alignment when text and images are mixed in a line of text."