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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content