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

You are here: Reference > JavaScript > client-side > style handling > properties > verticalAlign

verticalAlign style property

Browser support:

Specifies or returns how to align an element vertically.

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

Syntax:

object.verticalAlign;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: vertical-align

Possible values:

The type of this property is string.

One of the following values:

auto

The alignment of the element's baseline depends on the value of the layoutFlow 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 lineHeight 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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the verticalAlign property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeVertAlign (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var alignValue = selectTag.options[whichSelected].text;

            var tData = document.getElementById ("myTableData");
            tData.style.verticalAlign = alignValue;
        }
    </script>
</head>
<body>
    <table border="2px">
        <tr>
            <td id="myTableData">Aligned text</td>
            <td width="40">A long text content to create a higher table cell</td>
        </tr>
    </table>

    <br />
    <select size="9" onchange="ChangeVertAlign (this);">
        <option selected="selected" />auto
        <option />baseline
        <option />bottom
        <option />middle
        <option />sub
        <option />super
        <option />text-bottom
        <option />text-top
        <option />top
    </select>
</body>