Javascript Reference - HTML DOM Style verticalAlign Property

The verticalAlign property sets or gets the content vertical alignment.

Browser Support


`verticalAlign`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the verticalAlign property:

var v = object.style.verticalAlign

Set the verticalAlign property:

object.style.verticalAlign=value

Property Values

Value	Description
length	Set alignment in length unit. Negative values are allowed
%	Set alignment in a percent of the line-height property. Negative values are allowed
baseline	Set the alignment of the element baseline to the baseline of the container element. This is default
sub	as subscript
super	as superscript
top	Align the top of the element with the top of the tallest element on the line
text-top	Align the top of the element with the top of the container element's font
middle	Align the element in the middle of the parent element
bottom	Align the bottom of the element with the lowest element on the line
text-bottom	Align the bottom of the element with the bottom of the parent element's font
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

Default Value:	baseline
Return Value:	A string representing the vertical alignment
CSS Version	CSS1

Example

The following code shows how to set the vertical alignment to "bottom".


<!DOCTYPE html>
<html>
<head>
<style> 
table {<!--from   w w  w  . j  a va  2 s.co m-->
    border: 1px solid black;
    height: 100px;
}
</style>
</head>
<body>
<table>
  <tr><td id="myTd">Some example text</td></tr>
</table>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myTd").style.verticalAlign="bottom";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the vertical alignment.


<!DOCTYPE html>
<html>
<head>
<style> 
table {<!--from   www .j  a  v a  2 s.  c  o m-->
    border: 1px solid black;
    height: 100px;
}
</style>
</head>
<body>

<table>
  <tr><td id="myTd" style="vertical-align:top;">Some example text</td></tr>
</table>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    console.log(document.getElementById("myTd").style.verticalAlign);
}
</script>
</body>
</html>

The code above is rendered as follows: