In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > vertical-align

vertical-align property

Browser support:

Specifies how to align an element vertically.

Aligns content vertically, similarly to the deprecated vAlign attribute, but the 'sub' and 'super' values are only supported by text elements.

JavaScript page for this property: verticalAlign. You can find other example(s) there.

Possible values:

One of the following values:

auto

The alignment of the element's baseline depends on the value of the layout-flow property.

baseline

Default. Aligns the baseline of the element's text content with the baseline of the parent element.

bottom

Aligns the bottom of the element's text content to the bottom of the object.

height in length

The baseline of the element is aligned to this value above the baseline of the parent. For the supported length units, see the length page.

height in percentage

The height is the specified percentage of the line-height property.

inherit

Takes the value of this property from the computed style of the parent element.

middle

Aligns the vertical midpoint of the text content with the baseline plus half the x-height of the parent box.

sub

Aligns the baseline of the element's text content to the baseline of the parent subscript content.

super

Aligns the baseline of the element's text content to the baseline of the parent superscript content.

text-bottom

Aligns the bottom of the element's text content to the bottom of the parent element's font.

text-top

Aligns the top of the element's text content to the top of the parent element's font.

top

Aligns the top of the element's text content to the top of the object.

Default: baseline.

Example HTML code 1:

This example illustrates the use of the vertical-align property:

<body>
    <table border="2px">
        <tr>
            <td style="vertical-align: middle;">middle aligned text</td>
            <td style="vertical-align: top;">top aligned text</td>
            <td width="40">A long text content to create a higher table cell</td>
        </tr>
    </table>
</body>