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

打印页面