p {border:1px solid black; font-size:1.2em;}
span {color: pink; font-size:0.8em;}
.ex1 span {vertical-align: baseline; }
.ex2 span {vertical-align: sub;}
.ex3 span {vertical-align: super}
.ex4 span {vertical-align: top}
.ex5 span {vertical-align: middle}
.ex6 span {vertical-align: bottom}
.ex7 span {vertical-align: text-top}
.ex8 span {vertical-align: text-bottom}
.ex9 span {vertical-align: 25px}
.ex10 span {vertical-align: -50%;}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<p class="ex1">수직정렬 <span>baseline</span>정렬하기</p>
<p class="ex2">수직정렬 <span>sub</span>정렬하기</p>
<p class="ex3">수직정렬 <span>super</span>정렬하기</p>
<p class="ex4">수직정렬 <span>top</span>정렬하기</p>
<p class="ex5">수직정렬 <span>middle</span>정렬하기</p>
<p class="ex6">수직정렬 <span>bottom</span>정렬하기</p>
<p class="ex7">수직정렬 <span>text-top</span>정렬하기</p>
<p class="ex8">수직정렬 <span>text-bottom</span>정렬하기</p>
<p class="ex9">수직정렬 <span>25px</span>정렬하기</p>
<p class="ex10">수직정렬 <span>-50%</span>정렬하기</p>
</body>
</html>