vertical-align
CSS vertical-align Property
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
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
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. |