YouTip LogoYouTip

Home > JavaScript > Prop Style Verticalalign

Prop Style Verticalalign

📅 2026-06-13 | 📂 JavaScript

HTML DOM Style verticalAlign Property

JavaScript Reference Manual

Overview

JavaScript Objects

Browser Objects

DOM Objects

HTML Objects

HTML DOM Table Object

Explore Further

Style verticalAlign Property

Style Object

Definition and Usage

The verticalAlign property sets or returns the vertical alignment of content within an element.

Syntax

To set the verticalAlign property:

Object.style.verticalAlign="value"

To return the verticalAlign property:

Object.style.verticalAlign
Value Description
length Increases or decreases an element by a specified length. Negative values are allowed.
% Increases or decreases an element by a percentage of the "line-height" property. Negative values are allowed.
baseline Default. Aligns the element's baseline with the parent element's baseline.
sub Vertically aligns text as subscript.
super Vertically aligns text as 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 Positions 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 only supports "inherit" if a !DOCTYPE is declared. IE9 supports "inherit".

Example

Example

Change the vertical alignment of text in a table:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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

<source>

HTML DOM Table Object

ByteArk Coding Plan

Supports mainstream large models such as Doubao, GLM, DeepSeek, Kimi, MiniMax, official direct supply, stable and reliable.

¥9.9 / month

Subscribe Now

Xunfei Xingchen Coding Plan

Includes free model call quota, supports DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform.

¥3.9 / month

Subscribe Now

Category Navigation

Overview

← Prop Style VisibilityProp Style Top →

📂 Categories