RichInStyle.com tests: vertical-align

Text-top test

1. The top of the image should be aligned with the top of the background.

2. Sg Sg Sg

   The top of the red 'Sg' should be aligned with the top of the small Sg.

   The background of this should only be behind the text - the background should be 10 pixels high, not 100 pixels.

Text-bottom test

3. The bottom of the image should be

   aligned with the bottom of the background - not the baseline of the text.

Baseline test

4. The bottom of the image should be

   aligned with the baseline of the text - not the bottom of the background

Middle test

5. x The top of the smaller image should be aligned with the middle of the x.

6. These should not be aligned, since the x-height will be different:

   i

   i

   Nor these:

   i

   i

Bottom test

7. The bottom of the background should be aligned with the bottom of the image.

Top test

7. The top of the background should be aligned with the top of the image.

Super test

8. This text should be below the image.

Sub test

9. The baseline of this text should be above the image.

10. This should be subscripted.

Length test

11. This text should be above the image.

12. This text should be below the image.

13. The below should appear as three lines of text (even though they are 6; the first DIV has zero line height, so the vertical-align won't affect things).

    One line of text
    One line of text
    One line of text
    
    One line of text
    One line of text
    One line of text

Percentage test

Future compatibility test

14. The next three words: that are here have vertical-align: super; vertical-align: newvalue, and should be superscripted, provided super is supported.

15. The next three words: that are here have vertical-align: super; vertical-align: -1cm, and should be superscripted, provided length is unsupported.

Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.