CSS alignment vertical-align property
CSS Alignment vertical-align Property
Description
vertical-align property determines the alignment of text within a line or table cell.
Possible Values
- baseline − Aligns the baseline of an element with the baseline of its parent element.
- sub − The element’s baseline is lowered to a position appropriate for subscript text.
- super − The element’s baseline is raised to a position appropriate for superscript text.
- top − The top of the element’s box is aligned with the top of the line box (in an inline content context) or the top of the table cell (in a table context).
- text-top − The top of the element’s box is aligned with the top of the tallest inline box in the line.
- middle − The element’s baseline is aligned with the point defined by the parent’s baseline plus half the parent’s font’s x-height (in an inline content context).
- bottom − The bottom of the element’s box is aligned with the bottom of the line box (in an inline content context) or the bottom of the table cell (in a table context).
- text-bottom − Aligns the bottom of the element’s box with the bottom of the lowest inline box in the line.
- percentage − Raises or lowers the element’s baseline by the percentage given by the
line-heightproperty. - length − Raises or lowers the element’s baseline by the length given. This property allows negative length values. For this property, a length value of 0 has the same effect as the baseline.
Applies To
Inline-level elements and elements displayed as table cells.
DOM syntax
object.style.verticalAlign = "baseline";
Example
The following is an example −
<html>
<head>
</head>
<body>
<table style = "height:200px; width:400px;border:1px solid red;">
<tr>
<td style = "vertical-align:bottom;" > <p>This will be aligned to bottom of the cell.</p>
</td>
</tr>
</table>
</body>
</html>
Output −
