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.
|
