HTML Table Vertical Alignment

Definition & Usage

The vertical-align property is used to specify the vertical alignment of content within table cells.

Possible Values

• top: Aligns the content at the top of the cell.
• middle: Aligns the content in the middle of the cell.
• bottom: Aligns the content at the bottom of the cell.

Examples

Vertical Align Text to the Middle of the Cell

CSS

td {
  vertical-align: middle; /* aligns the text to the middle of the cell */
  height: 80px;
}

In this example, the vertical-align: middle; property is used to vertically center the text within the table cells.

Align Text to the Top of the Cell

CSS

td {
  vertical-align: top; /* aligns the text to the top of the cell */
  height: 80px;
}

In this example, the vertical-align: top; property is used to align the text to the top of the table cells.

Align Text to the Bottom of the Cell

CSS

td {
  vertical-align: bottom; /* aligns the text to the bottom of the cell */
  height: 80px;
}

Here, the vertical-align: bottom; property is used to align the text to the bottom of the table cells.

Combine vertical-align with line-height

CSS

td {
  vertical-align: middle;
  height: 80px;
  line-height: 80px;
}

Here, the line-height property is used in conjunction with vertical-align to vertically center the text within the table cells.