vertical-align property

Sets or retrieves the vertical alignment of the object.

CSS 2.1, Section 5.4.4

Syntax

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom

Property values

auto

Aligns the contents of an object according to the value of the -ms-layout-flow attribute.

baseline

Default. Aligns the contents of an object supporting VALIGN to the base line.

sub

Vertically aligns the text to subscript.

super

Vertically aligns the text to superscript.

top

Vertically aligns the contents of an object supporting VALIGN to the top of the object.

middle

Vertically aligns the contents of an object supporting VALIGN to the middle of the object.

bottom

Vertically aligns the contents of an object supporting VALIGN to the bottom of the object.

text-top

Vertically aligns the text of an object supporting VALIGN to the top of the object.

text-bottom

Vertically aligns the text of an object supporting VALIGN to the bottom of the object.

CSS information

Applies Toinline-level and table-cell elements
Mediavisual
Inheritedno
Initial Valuebaseline

Standards information

Remarks

The sub and super values are supported on text. The auto value is supported on the currentStyle object. The other values are supported on objects that support VALIGN.

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

Examples

This example uses the vertical-align property to align text within table cells.


<table>
   <tr>
      <td id="top">top</td>
      <td id="middle">middle</td>
      <td id="bottom">bottom</td>
   </tr>
</table>

In the first table cell, the vertical-align property aligns the text to the top, in the second table cell, the vertical-align property aligns text to the middle, and in the third table cell, the vertical-align property aligns text to the bottom.


td {
   height: 100px;
   width: 100px;
   border: 1px solid #000;
}
#top {
   vertical-align: top;
}
#middle {
   vertical-align: middle;
}
#bottom {
  vertical-align: bottom;
}

You can see the three table cells with different text alignment below.

Three table shows showing the vertical-align property values

The following example uses the vertical-align property to align text within a paragraph.


<p><span id="baseline">lorem ipsum dolor</span><span id="sub">lorem ipsum dolor</span><span id="super">lorem ipsum dolor</span></p>

Here, each span of text uses the vertical-align property to align the text to the baseline, to subscript, and to superscript.


#baseline {
   vertical-align: baseline;
}
#sub {
   vertical-align: sub;
}
#super {
   vertical-align: super;
}

You can see paragraph of text below.

A paragraph of text using different values for the vertical-align property

See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
vAlign

 

 

Show:
© 2014 Microsoft