Style verticalAlign 屬性
Style 對象
定義和用法
verticalAlign 屬性設置或返回元素中內容的垂直對齊方式。
語法
設置 verticalAlign 屬性：
Object.style.verticalAlign="value"
返回 verticalAlign 屬性：
Object.style.verticalAlign
| 值 | 描述 |
|---|---|
| length | 通過指定的長度來提高或降低一個元素。可使用負值。 |
| % | 通過 "line-height" 屬性的百分比來提高或降低一個元素。可使用負值。 |
| baseline | 默認。把元素的基線與父元素的基線對齊。 |
| sub | 垂直對齊文本的下標。 |
| super | 垂直對齊文本的上標。 |
| top | 把元素的頂端與行中最高元素的頂端對齊。 |
| text-top | 把元素的頂端與父元素字體的頂端對齊。 |
| middle | 把元素放置在父元素的中部。 |
| bottom | 把元素的底端與行中最低元素的底端對齊。 |
| text-bottom | 把元素的底端與父元素字體的底端對齊。 |
| inherit | 規定 verticalAlign 屬性的值應該從父元素繼承。 |
流覽器支持
所有主要流覽器都支持 verticalAlign 屬性。
注意：IE7 及更早的版本不支持 "inherit" 值。IE8 只有規定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。
實例
實例
改變表格中文本的垂直對齊方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IT研修(xuhuhu.com)</title>
<script>
function displayResult(){
document.getElementById("td1").style.verticalAlign="bottom";
}
</script>
</head>
<body>
<table border="1" height="100px">
<tr>
<td id="td1">一些實例文本</td>
</tr>
</table>
<br>
<input type="button" onclick="displayResult()" value="對齊文本">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>IT研修(xuhuhu.com)</title>
<script>
function displayResult(){
document.getElementById("td1").style.verticalAlign="bottom";
}
</script>
</head>
<body>
<table border="1" height="100px">
<tr>
<td id="td1">一些實例文本</td>
</tr>
</table>
<br>
<input type="button" onclick="displayResult()" value="對齊文本">
</body>
</html>
Style 對象