CSS position verticalAlign property
CSS Position verticalAlign Property
Description
The vertical alignment property determines the alignment of text within a line or table cell.
Possible Values
- baseline − The element’s baseline is aligned with the parent element’s baseline.
-
sub − The element’s baseline is lowered to accommodate 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 the context of inline content), or with the top of the table cell in a table.
-
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 parent’s baseline plus half the x-height of the parent’s font (in the context of inline content).
-
bottom − The bottom of the element’s box is aligned with the bottom of the line box (in the context of inline content), or with the bottom of the table cell in a table.
-
text-bottom − The bottom of the element’s box is aligned with the bottom of the lowest inline box in the line.
-
percentage − The element’s baseline is adjusted up or down by the given percentage of the line-height property.
-
length − The baseline of an element is adjusted up or down by the given length value. This property allows negative length values. For this property, a length value of 0 has the same effect as the baseline value.
Applies To
Inline-level elements and elements with table cell display.
DOM syntax
object.style.verticalAlign = "baseline";
Example
This 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 the bottom of the cell.</p>
</td>
</tr>
</table>
</body>
>
>
This will produce the following result −
