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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > vAlign (col, tbody, td, tr, ...)

vAlign property (col, tbody, td, tr, ...)

Browser support:

Specifies or returns the vertical alignment of the text within an object.

You can use the verticalAlign style property instead.

Syntax:

object.vAlign;

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

This property is read/write.

HTML page for this property: vAlign

Possible values:

String that sets or retrieves the vertical alignment.

One of the following values:

baseline

Base line of the first line of text is aligned with the base lines in adjacent objects.

bottom

Text is aligned to the bottom of the object.

center

Text is aligned to the middle of the object. Same as middle.

middle

Default. Text is aligned to the middle of the object. Same as center.

top

Text is aligned to the top of the object.

Default: middle.

Example HTML code 1:

This example illustrates the use of the vAlign attribute:

<table border="1px">
    <tr height="100">
        <td valign="top">Apple</td>
        <td valign="middle">Pear</td>
        <td valign="bottom">Peach</td>
        <td id="tdToChange">Change this text's vertical position!</td>
    </tr>
</table>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the vAlign property:

<head>
    <script type="text/javascript">
        function ChangeVAlign (elem) {
            var tdata = document.getElementById ("tdToChange");
            
            // Returns the index of the selected option
            var whichSelected = elem.selectedIndex;

            // Returns the text of the selected option
            var vPosition = elem.options[whichSelected].text;

            tdata.vAlign = vPosition;
        }
    </script>
</head>
<body>
    <table border="1px">
        <tr height="100">
            <td valign="top">Apple</td>
            <td valign="middle">Pear</td>
            <td valign="bottom">Peach</td>
            <td id="tdToChange">Change this text vertical position!</td>
        </tr>
    </table>

    <select onchange="ChangeVAlign (this);" size="4">
        <option />baseline
        <option />bottom
        <option selected="selected" />middle
        <option />top
    </select>
</body>