CSS Properties

HTML Table Vertical Alignment

Specifies the vertical alignment for an element. Commonly used for table cells.

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; }
Column 1 Column 2 Column 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3

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; }
Column 1 Column 2 Column 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3

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; }
Column 1 Column 2 Column 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3

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; }
Column 1 Column 2 Column 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3

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