HTML - DOM Style 物件 verticalAlign 屬性

HTML DOM Style 物件的 **verticalAlign** 屬性用於設定或返回元素內容的垂直對齊方式。它僅適用於內聯、內聯塊或表格單元格框。

語法

設定 verticalAlign 屬性

object.style.verticalAlign= value;

獲取 verticalAlign 屬性

object.style.verticalAlign;

屬性值

值	描述
長度	用於透過指定長度提升或降低元素。它也接受負值。
百分比	用於使用 line-height 屬性的百分比提升或降低元素。它也接受負值。
基線	這是預設值，它將內容的基線與父元素的基線對齊。
下標	將元素對齊為下標。
上標	將元素對齊為上標。
頂部	將元素的頂部與該行上最高元素的頂部對齊。
文字頂部	將元素的頂部與父元素字型的頂部對齊。
中間	將元素放置在父元素的中間。
底部	將元素的底部與該行上最低元素的底部對齊。
文字底部	將元素的底部與父元素字型的底部對齊。
初始	用於將此屬性設定為其預設值。
繼承	用於繼承其父元素的屬性。

返回值

它返回一個字串值，表示元素內容的垂直對齊方式。

HTML DOM Style 物件“verticalAlign”屬性示例

以下示例設定表格單元格的頂部、中間、基線和中間屬性。

<!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>

支援的瀏覽器

屬性
verticalAlign	是 1	是 12	是 1	是 1	是 4

html_dom_style_object_reference.htm

列印頁面