You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.

Problems With 'vertical-align'


Example 1.

In the following paragraph, all images should be aligned with the top of the 14-point text, which is identical to the first section of text, whereas any size text should be aligned with the text baseline (which is the default value). (Note. You will need images enabled to see the problems depicted below).

This paragraph contains many images of varying heights and widths all of which should be aligned with the top of a 14-point text element regardless of the line in which the images appear.


Example 2.

In the following paragraph, all images should be aligned with the middle of the default text, whereas any text should be aligned with the text baseline (which is the default value).

This paragraph contains many images of varying heights and widths all of which should be aligned with the middle of a 14-point text element regardless of the line in which the images appear.


Example 3.

In the following paragraph, all elements should be aligned with the top of the tallest element on the line, whether that element is an image or not. Each fragment of text has been SPANned appropriately in order to cause this to happen.

This paragraph contains many images and some text of varying heights and widths all of which should be aligned with the top of the tallest element in whichever line the elements appear.