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.
Example
| img.left { vertical-align: top }
<img style=”vertical-align: top” src=”image.gif” mce_src=”image.gif” > |
Possible Values
| Value | Description |
|---|---|
| inherit | Explicitly sets the value of this property to that of the parent. |
| baseline|middle | 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 | 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 | 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 | 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] | 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] | 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. |
October 31st, 2007 at 11:14 am
This property is an epic failure.