vertical-align

Support Key: [CSS1|CSS2|CSS2.1] [IE4|N4|O3.5|S1]
 Other Positioning Properties
top
right
bottom
left
overflow
 overflow-x
overflow-y
text-overflow
clip
z-index
= Index DOT Css by Brian Wilson =
  Main Index | Property Index | CSS Support History | Browser History  


   Quick Statistics   
Default Value:
   baseline
Applicable Elements:
Inline and 'table-cell' elements
Inherit From Parent:
No
Applicable Media:
Visual
HTML Equivalent:
<applet|iframe|img|input|object|spacer ALIGN>,
<caption|col|colgroup|tbody|tfoot|thead|th|td|tr VALIGN>
Official Docs:
CSS1: Sect. 5.4.4
CSS2: Sect. 10.8, CSS2.1: Sect 10.8
What is it?
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|CSS2.1] [N6|O4|S1]
Type: Explicit
Description:
Explicitly sets the value of this property to that of the parent.
baseline|middle
[CSS1|CSS2|CSS2.1] [IE4|N4|O3.5|S1]
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|CSS2.1] [IE4|N4|O3.5|S1]
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|CSS2.1] [IE4|N4|O3.5|S1]
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|CSS2.1] [IE4|N6|O3.5|S1]
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|CSS2.1] [IE6|N6|O3.5|S1]
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|CSS2.1] [IE6|N6|O3.5|S1]
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:  <img STYLE="vertical-align: top"
SRC="image.gif" ALT="This is a stylish image">
Notes Browser Peculiarities

Boring Copyright Stuff....