vertical-align (CSS property)
Example
This style rule makes images within table cells align to the bottom of the cell, to eliminate the gap that otherwise occurs:
td img {
vertical-align: bottom;
}
Description
This property controls the vertical alignment of inline boxes within a line box, or of table cells within a row.
Value
The following values apply to inline boxes:
A length value raises or lowers (depending on its sign) the box by the specified distance.
A percentage value raises or lowers (depending on its sign) the box by the distance specified as the percentage applied to the element’s
line-height.The following keyword values can be specified for inline boxes:
baseline- aligns the baseline of the box with the baseline of the parent box; if the box doesn’t have a baseline (for instance, an image) the bottom margin edge is aligned with the parent’s baseline
bottom- aligns the bottom of the aligned subtree with the bottom of the line box1
middle- aligns the vertical midpoint of the box with a point that’s half the parent’s x-height above the baseline of the parent box
sub- lowers the baseline of the box to a position suitable for subscripts of the parent’s box
super- raises the baseline of the box to a position suitable for superscripts of the parent’s box
text-bottom- aligns the bottom of the box with the bottom of the parent element’s font
text-top- aligns the top of the box with the top of the parent element’s font
top- aligns the top of the aligned subtree with the top of the line box
For inline blocks, the baseline is the baseline of the last line box in the normal flow. If there isn’t one, the element’s bottom margin edge is used.
The baseline of an inline table is the baseline of the first row of the table.
The following values apply to table cells:
baseline- aligns the baseline of the cell with the baseline of the first of the rows it spans
bottom- aligns the bottom of the cell box with the bottom of the last row it spans
middle- aligns the center of the cell with the center of the rows it spans
top- aligns the top of the cell box with the top of the first row it spans
Any other value, including lengths and percentages, won’t apply
to cells. The computed vertical alignment will be
baseline.
The baseline of a table cell is the baseline of the first line box in the cell. If there is none, the bottom of the cell box is used.
Compatibility
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Buggy |
| 1.5 | Buggy | |
| 2.0 | Buggy | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
In Internet Explorer
for Windows versions up to and including 7, some elements behave as if the
declaration vertical-align: inherit; was in the user
agent style sheet. The values bottom and
top are treated like text-bottom and
text-top, respectively. Length values, percentages, and
the values sub, super,
text-bottom, and text-top don’t
compute to baseline for table cells.
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
In Firefox up to and
including version 2, some elements behave as if the declaration
vertical-align: inherit; was in the user agent style
sheet.
As an example, in both Firefox and Internet Explorer for
Windows, a vertical-align value specified for a table
row will be applied to all the cells in that row. This is incorrect,
because vertical-align doesn’t apply to table rows, and
isn’t inherited, so such a setting should have no
effect.
Related Reading
Footnotes
1 An aligned subtree includes the element and the
aligned subtrees of all child elements, except those whose
vertical-align value is
top or
bottom.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

