The vertical-align property specifies the vertical alignment of an inline, inline-block or table-cell box. Inline-level elements include images, text, buttons, etc.
This property works only in the following contexts:
- To vertically align a content inside table cells (<td>) and elements with display: table-cell.
- To vertically align the box of an inline element inside its line box. E.g. it can be used to vertically align <img> in a line of text.
We can’t use the vertical-align property to vertically align block-level elements.
Initial Value | baseline |
Applies to | Inline-level and table-cell elements, also applies to ::first-letter and ::first-line. |
Inherited | No. |
Animatable | Yes. The vertical alignment is animatable. |
Version | CSS1 |
DOM Syntax | object.style.verticalAlign = "middle"; |
Syntax
vertical-align: baseline | length | sub | super | top | text-top | middle | bottom| text-bottom | initial | inherit;
Example of the vertical-align property with the "sub" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: sub;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>
Result
Example of the vertical-align property with the "middle" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>
Example of the vertical-align property with the "super" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
vertical-align: super;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<p>This is some paragraph with
<span>vertical-align</span> property.
</p>
</body>
</html>
Example of the vertical-align property with the "top" and "bottom" values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid #cccccc;
}
td {
height: 100px;
}
.top {
vertical-align: top;
}
.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>Vertical-align property example</h2>
<table>
<tr>
<th>Bottom</th>
<th>Middle</th>
<th>Top</th>
</tr>
<tr>
<td class="bottom">Some text</td>
<td>Some text</td>
<td class="top">Some text</td>
</tr>
</table>
</body>
</html>
Values
Value | Descriptions | Play it |
---|---|---|
baseline | Aligns the baseline of the element with the baseline of its parent. This is a default value. | Play it » |
length | Raise (positive value) or lower (negative value) the box by this distance. Negative values are allowed. | Play it » |
sub | Lower the baseline of the box to the proper position for subscripts of the parent's box. | Play it » |
super | Raise the baseline of the box to the proper position for superscripts of the parent's box. | Play it » |
top | Align the top of the aligned subtree with the top of the line box. | Play it » |
text-top | Align the top of the box with the top of the parent's content area. | Play it » |
middle | Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. | Play it » |
bottom | Align the bottom of the aligned subtree with the bottom of the line box. | Play it » |
text-bottom | Align the bottom of the box with the bottom of the parent's content area. | Play it » |
initial | It makes the property use its default value. | Play it » |
inherit | It inherits the property from its parents element. |
Browser support
1.0+ | 1.0+ | 1.0+ | 4.0+ |
Practice Your Knowledge
What does the CSS 'vertical-align' property do?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.