-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvertical_align.html
105 lines (101 loc) · 4.51 KB
/
vertical_align.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./style/reset.css" />
<link rel="stylesheet" type="text/css" href="./style/main.css" />
<link rel="stylesheet" type="text/css" href="./style/vertical_align.css" />
</head>
<body>
<h4 class="bold m-bottom10">Still not clear!</h4>
<ul class="list bc-blue">
<li class="text-top bc-yellow">text-top</li>
<li class="text-bottom bc-yellow">text-bottom</li>
<li class="baseline bc-green">baseline</li>
<li class="sub bc-yellow">sub</li>
<li class="super bc-yellow">super</li>
<li class="top bc-yellow">top</li>
<li class="middle bc-yellow">middle</li>
<li class="bottom bc-yellow">bottom</li>
</ul>
<ul>
<li>
<h4 class="bold m-bottom10 m-top20">Text-top:</h4>
<div class="inline-block border bw3 bc1">
Lorem ipsum dolor sit amet
<img class="text-top" src="http://lorempixel.com/100/100/" alt="lorempixel.com">
consectetur adipiscing elit.
</div>
</li>
<li>
<h4 class="bold m-bottom10 m-top20">Text-bottom:</h4>
<div class="inline-block border bw3 bc1">
Donec interdum leo
<img class="text-bottom" src="http://lorempixel.com/100/100/" alt="lorempixel.com">
at gravida tristique.
</div>
</li>
<li>
<h4 class="bold m-bottom10 m-top20">Top & bottom:</h4>
<div class="inline-block border bw3 bc1">
<span class="top">Lorem ipsum dolor sit amet</span>
<img class="middle" src="http://lorempixel.com/100/100/" alt="lorempixel.com">
<span class="bottom">consectetur adipiscing elit.</span>
</div>
</li>
<li><h4 class="bold m-bottom10 m-top20">Difference between text-top/text-bottom and top/bottom:</h4></li>
<li>
<h4 class="bold m-bottom10 m-top20">Text-top:</h4>
<div class="inline-block line-height150 border bw3 bc1">
Lorem ipsum dolor sit amet
<img class="text-top" src="http://lorempixel.com/100/100/" alt="lorempixel.com">
consectetur adipiscing elit.
</div>
</li>
<li>
<h4 class="bold m-bottom10 m-top20">Text-bottom:</h4>
<div class="inline-block line-height150 border bw3 bc1">
Donec interdum leo
<img class="text-bottom" src="http://lorempixel.com/100/100/" alt="lorempixel.com">
at gravida tristique.
</div>
</li>
<li>
<h4 class="bold m-bottom10 m-top20">Top & bottom:</h4>
<div class="inline-block line-height150 border bw3 bc1">
<span class="top line-height18">Lorem ipsum dolor sit amet</span>
<img class="middle" src="http://lorempixel.com/100/100/" alt="lorempixel.com">
<span class="bottom line-height18">consectetur adipiscing elit.</span>
</div>
</li>
<li>
<h4 class="bold m-bottom10 m-top20">Sub & super:</h4>
<div class="italic m-top10">Example:</div>
2x
<span class="super">3</span>
-11x
<span class="super">2</span>
+12x+9=0
<div class="italic m-top10">Result:</div>
X
<span class="sub">1</span>
=-1/2,
X
<span class="sub">2</span>
=3,
X
<span class="sub">3</span>
=3
</li>
<li>
<h4 class="bold m-bottom10 m-top20">Middle:</h4>
<div class="inline-block line-height150 border bw3 bc1">
Donec interdum leo
<img class="middle" src="http://lorempixel.com/100/100/" alt="lorempixel.com">
nunc.
</div>
</li>
</ul>
</body>
</html>