CSS 데모: vertical-align 데모 버튼을 클릭해서 star의 수직 정렬을 확인해 보세요!
selector {
    vertical-align: /* value */
}
baseline
x-height
<p style="font-size: 3em; background-color: silver;">
    <img class="icon" src="star.svg" alt="별 모양의 아이콘"> Eng 한글
</p>
.icon {
    vertical-align: baseline;
}
실제 적용 모습
.icon {
    vertical-align: middle;
}
실제 적용 모습
.icon {
    vertical-align: sub;
}
실제 적용 모습
.icon {
    vertical-align: super;
}
실제 적용 모습
.icon {
    vertical-align: text-top;
}
실제 적용 모습
.icon {
    vertical-align: text-bottom;
}
실제 적용 모습
.icon {
    vertical-align: 0; /* baseline과 동일함 */
}
실제 적용 모습
.icon {
    vertical-align: 10px; /* 양수는 이 길이만큼 올립니다. */
}
실제 적용 모습
.icon {
    vertical-align: -10px; /* 음수는 이 길이만큼 내립니다. */
}
실제 적용 모습
.icon {
    vertical-align: 10%; /* 양수는 이 %만큼 올립니다. */
}
실제 적용 모습
.icon {
    vertical-align: -10%; /* 음수는 이 %만큼 내립니다. */
}
실제 적용 모습
.icon {
    vertical-align: top;
}
실제 적용 모습
.icon {
    vertical-align: bottom;
}
실제 적용 모습
<table border="1" width="100%">
    <tr>
        <td style="padding:20px">td<br>td<br>td</td>
        <th class="cell" style="padding:20px;background-color: silver;">td</th>
        <td style="padding:20px">td<br>td<br>td</td>
    </tr>
</table>
실제 적용 모습

caniuse.com에서 더 자세한 정보를 확인해 보세요.