1
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN">
4 <title>CSS
2.1 Test Suite: vertical-align
</title>
5 <script src=
"../resources/ahem.js"></script>
6 <style type=
"text/css">
8 p
.example
{ font: 15px/1 Ahem
; color: blue
; background: white url
(support
/square-white
.png
); border: 1px solid silver
; padding: 0.5em; margin: 1em; }
10 big
{font-size: 20px;}
11 small
{font-size: 10px;}
12 .midalign {vertical-align: middle
;}
14 <link rel=
"help" href=
"http://www.w3.org/TR/CSS21/visudet.html#q26" title=
"10.8.1 Leading and half-leading">
18 Change your window size. However the lines wrap, the blue
19 rectanglues should always have their middles on the same alignment as
20 other blue rectangles on the line.
24 <img alt=
"[Image]" src=
"support/swatch-blue.png" class=
"midalign" height=
"30">
25 <span style=
"font-size: 250%;" class=
"no">xxx
</span>
26 <img alt=
"[Image]" src=
"support/swatch-blue.png" class=
"midalign" height=
"50">
28 <img alt=
"[Image]" src=
"support/swatch-blue.png" class=
"midalign" height=
"10">
29 <small class=
"no">xxx
</small>
30 <img alt=
"[Image]" src=
"support/swatch-blue.png" class=
"midalign" height=
"20">
32 <img alt=
"[Image]" src=
"support/swatch-blue.png" class=
"midalign" height=
"65">
34 <img alt=
"[Image]" src=
"support/swatch-blue.png" class=
"midalign" height=
"35">
35 <span style=
"font-size: 2em;" class=
"no">xxx
</span>
36 <img alt=
"[Image]" src=
"support/swatch-blue.png" class=
"midalign" height=
"50">
37 <span style=
"font-size: 150%;" class=
"no">xxx
<span style=
"font-size: 250%;">xxx
</span> xxx
</span>
38 <img alt=
"[Image]" src=
"support/swatch-blue.png" class=
"midalign" height=
"50">
39 <small class=
"no">xxx
</small>
40 <img alt=
"[Image]" src=
"support/swatch-blue.png" class=
"midalign" height=
"15">
41 <big class=
"no">xxx
</big>
42 <img alt=
"[Image]" src=
"support/swatch-blue.png" class=
"midalign" height=
"90">