Try it Live

<!DOCTYPE html>
<html>
 <head>
 <style>
 #vertical_align_length {
 vertical-align: 30px;
 }
 
 #vertical_align_baseline {
 vertical-align: baseline;
 }
 
 #vertical_align_percent1 {
 vertical-align: 30%;
 }
 
 #vertical_align_percent2 {
 vertical-align: -40%;
 }
 
 #vertical_align_middle {
 vertical-align: middle;
 }
 
 #vertical_align_sub {
 vertical-align: sub;
 }
 
 #vertical_align_super {
 vertical-align: super;
 }
 </style>
 </head>
 <body>
 Vertical Alignment in <a id="vertical_align_length" href="#" target="_blank">LENGTH</a>
 Vertical Alignment as <a id="vertical_align_baseline" href="#" target="_blank">BASELINE(default)</a>
 Vertical Alignment as 30 <a id="vertical_align_percent1" href="#" target="_blank">PERCENT</a> towards the top
 Vertical Alignment in -40<a id="vertical_align_percent2" href="#" target="_blank">PERCENT</a> towards the bottom
 Vertical Alignment in <a id="vertical_align_middle" href="#" target="_blank">MIDDLE</a>
 Vertical Alignment in <a id="vertical_align_sub" href="#" target="_blank">SUB</a>. It acts as a subscript
 Vertical Alignment in <a id="vertical_align_super" href="#" target="_blank">SUPER</a>. It acts as superscript
 </body>
</html>