vertical-align

Article
10/10/2017

Sets the vertical alignment of the object.

Syntax

{ vertical-align: sAlign }

Possible values

sAlign

Variant that specifies one of the following values:

baseline	Default. Aligns the contents of an object to the base line.
auto	Aligns the contents of an object according to the value of the layout-flow property.
bottom	Vertically aligns the contents of an object to the bottom of the object.
middle	Vertically aligns the contents of an object to the middle of the object.
sub	Vertically aligns the text to subscript. Does not apply to table cells.
super	Vertically aligns the text to superscript. Does not apply to table cells.
text-bottom	Vertically aligns the text of an object to the bottom of the object. Does not apply to table cells.
text-top	Vertically aligns the text of an object to the top of the object. Does not apply to table cells.
top	Vertically aligns the contents of an object to the top of the object.

The property has a default value of baseline for all objects and is not inherited.

Remarks

The sub and super values are supported for text objects. The other values are supported for other objects except as noted above.

The auto value is identical to the baseline value when the layout-flow is horizontal. When the layout-flow is vertical-ideographic, the auto value is identical to the middle value.

Example

This example uses the vertical-align property to align text within a table cell:

<table border width=100>
<tr>
    <td onmouseover="this.style.vertical-align ='bottom'" 
    onmouseout="this.style.vertical-align =''">
    text to align</td> 
</tr>
</table>

Standards information

This property is defined in Cascading Style Sheets (CSS), Level 1 (CSS1) Ee371230.xtlink_newWindow(en-us,Expression.40).png .

Applies to

col, custom, defaults, img, span, tbody, td, tfoot, th, thead, tr