• CSS Properties
  • vertical-align
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<style>
5
    .ex1 {
6
        vertical-align: baseline;
7
    }
8
    .ex2 {
9
        vertical-align: text-top;
10
    }
11
    .ex3 {
12
        vertical-align: text-bottom;
13
    }
14
    .ex4 {
15
        vertical-align: sub;
16
    }
17
    .ex5 {
18
        vertical-align: super;
19
    }
20
</style>
21
</head>
22
<body>
23
​
24
<h1>The vertical-align property</h1>
25
​
26
<h2>vertical-align: baseline (default)</h2>
27
<p>An <img class="ex1" src="https://webtutor.dev/images/computer.jpg" width="50" height="30"> image with a default alignment.</p>
28
​
29
<h2>vertical-align: text-top</h2>
30
<p>An <img class="ex2" src="https://webtutor.dev/images/computer.jpg" width="50" height="30"> image with a text-top alignment.</p>
31
​
32
<h2>vertical-align: text-bottom</h2>
33
<p>An <img class="ex3" src="https://webtutor.dev/images/computer.jpg" width="50" height="30"> image with a text-bottom alignment.</p>
34
​
35
<h2>vertical-align: sub</h2>
36
<p>An <img class="ex4" src="https://webtutor.dev/images/computer.jpg" width="50" height="30"> image with a sub alignment.</p>
37
​
38
<h2>vertical-align: sup</h2>
39
<p>An <img class="ex5" src="https://webtutor.dev/images/computer.jpg" width="50" height="30"> image with a super alignment.</p>
40
​
41
</body>
42
</html>