HTML - DOM Style Object verticalAlign Property

Quiz

HTML DOM Style Object verticalAlign property is used for setting or returning the vertical alignment of the content in an element. It works only on inline, inline-block or table-cell box.

Syntax

Set the verticalAlign property:

object.style.verticalAlign= value;

Get the verticalAlign property:

object.style.verticalAlign;

Property Values

Value	Description
length	It is used for raising or lowering an element by specified length. It also accepts negative value.
percentage	It is used for raising or lowering an element using percentage of line-height property. It also accepts negative value.
baseline	It is the default value which aligns the baseline of the content with the baseline of parent element.
sub	It aligns the element as subscript.
super	It aligns the element as superscript.
top	It aligns top of the element with the top of the tallest element on the line.
text-top	It aligns the top of the element with the top of the parent element's font.
middle	It places the element in the middle of the parent element.
bottom	It aligns the bottom of the element, with the lowest element on the line.
text-bottom	It aligns the bottom of the element with the bottom of the parent element's font.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents the vertical alignment of the content in an element.

Example of HTML DOM Style Object 'verticalAlign' Property

The following example sets top, middle, baseline and middle property of a table cell.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object verticalAlign Property
    </title>
    <style>
        table {
            border: 1px solid black;
            height: 200px;
            width: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
    <p>
        Click to set different Vertical alignment.
    </p>
    <button onclick="fun()">Top</button>
    <button onclick="funTwo()">Middle</button>
    <button onclick="funThree()">Baseline</button>
    <button onclick="funFour()">Bottom</button>
    <br><br>
    <table>
        <tr>
            <td id="valign">Single element table</td>
        </tr>
    </table>
    <script>
        function fun() {
            document.getElementById("valign")
                .style.verticalAlign = "top";
        }
        function funTwo() {
            document.getElementById("valign")
                .style.verticalAlign = "middle";
        }
        function funThree() {
            document.getElementById("valign")
                .style.verticalAlign = "baseline";
        }
        function funFour() {
            document.getElementById("valign")
                .style.verticalAlign = "bottom";
        }
    </script>
</body>
</html>

Supported Browsers

Property
verticalAlign	Yes 1	Yes 12	Yes 1	Yes 1	Yes 4

html_dom.htm

Print Page