Style verticalAlign 属性
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>牛客教程(nowcoder.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>