1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: Test for vertical-align:calc()</title>
4 <link href="https://dbaron.org/" rel="author" title="L. David Baron">
5 <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
6 <link href="reference/calc-vertical-align-1-ref.htm" rel="match">
7 <meta content="" name="flags">
8
9 </head><body><div style="line-height: 100px; margin-top: 100px">
10 <span>x</span>
11 <span style="vertical-align: calc(50px)">x</span>
12 <span style="vertical-align: calc(50%)">x</span>
13 <span style="vertical-align: calc(25px + 50%)">x</span>
14 <span style="vertical-align: calc(150% / 2 - 30px)">x</span>
15 <span style="vertical-align: calc(40px + 10% - 20% / 2)">x</span>
16 <span style="vertical-align: calc(40px - 10%)">x</span>
17 </div>
18
19
20 </body></html>