Long description of example illustrating table row height calculations and vertical cell alignment

This diagram shows how the 'vertical-align' properties on cells combine to determine the height of the row containing the cells. The diagram also illustrates the meaning of some values of 'vertical-align' that apply to table cells: baseline, top, bottom, and middle.

The diagram shows a row of five (labeled) table cells of varying heights and alignments. To the right of the row, labels indicate the horizontal position of the row's top, baseline, middle, and bottom (from top to bottom).

The first cell is aligned with the row baseline and extends to just below the row top. The second cell is also aligned with the row baseline and extends to just above the row bottom. The third cell is aligned with the top of the row and extends to just above the row middle. The fourth cell is aligned with the row bottom, and extends to just above the row middle. The fifth cell is aligned with the row middle and touches neither the top nor bottom of the row. A red horizontal line within each cell box shows how it aligns vertically in the row box.

Return to image.