Style verticalAlignProperty
Style Object
Definition and Usage
The verticalAlign property sets or returns the vertical alignment of the content within an element.
Syntax
Set the verticalAlign property:
Object.style.verticalAlign="value"
Return the verticalAlign property:
Object.style.verticalAlign
| Value | Description |
|---|---|
| length | Raises or lowers an element by a specified length. Negative values are allowed. |
| % | Raises or lowers an element by a percentage of the "line-height" property. Negative values are allowed. |
| baseline | Default. Aligns the baseline of the element with the baseline of the parent element. |
| sub | Vertically aligns the text as a subscript. |
| super | Vertically aligns the text as a superscript. |
| top | Aligns the top of the element with the top of the tallest element in the line. |
| text-top | Aligns the top of the element with the top of the parent element's font. |
| middle | Places the element in the middle of the parent element. |
| bottom | Aligns the bottom of the element with the bottom of the lowest element in the line. |
| text-bottom | Aligns the bottom of the element with the bottom of the parent element's font. |
| inherit | Specifies that the value of the verticalAlign property should be inherited from the parent element. |
Browser Support
All major browsers support the verticalAlign property.
Note:IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if a !DOCTYPE is specified. IE9 supports "inherit".
Example
Example
Change the vertical alignment of text in a table:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("td1").style.verticalAlign="bottom";
}
</script>
</head>
<body>
<table border="1" height="100px">
<tr>
<td id="td1">Some example text</td>
</tr>
</table>
<br>
<input type="button" onclick="displayResult()" value="Align text">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example Tutorial (example.com)</title>
<script>
function displayResult(){
document.getElementById("td1").style.verticalAlign="bottom";
}
</script>
</head>
<body>
<table border="1" height="100px">
<tr>
<td id="td1">Some example text</td>
</tr>
</table>
<br>
<input type="button" onclick="displayResult()" value="Align text">
</body>
</html>
Try it Yourself »
Style Object Other Extensions