Vertical align
Inline and inline-block
Baseline
Text-top
Text-bottom
Top
Middle
Bottom
<h1>Baseline<img src="../img/20x20.png" class="align-baseline"></h1>
<h1>Text-top<img src="../img/20x20.png" class="align-text-top"></h1>
<h1>Text-bottom<img src="../img/20x20.png" class="align-text-bottom"></h1>
<h1>Top<img src="../img/20x20.png" class="align-top"></h1>
<h1>Middle<img src="../img/20x20.png" class="align-middle"></h1>
<h1>Bottom<img src="../img/20x20.png" class="align-bottom"></h1><h1>Baseline<img src="../img/20x20.png" class="align-baseline"></h1>
<h1>Text-top<img src="../img/20x20.png" class="align-text-top"></h1>
<h1>Text-bottom<img src="../img/20x20.png" class="align-text-bottom"></h1>
<h1>Top<img src="../img/20x20.png" class="align-top"></h1>
<h1>Middle<img src="../img/20x20.png" class="align-middle"></h1>
<h1>Bottom<img src="../img/20x20.png" class="align-bottom"></h1>
Table cell
Text-top and text-bottom not applicable on table cells
| Baseline | Top | Middle | Bottom |
<p>Text-top and text-bottom not applicable on table cells</p>
<table class="table" style="height: 200px;">
<tbody>
<tr>
<td class="align-baseline">Baseline</td>
<td class="align-top">Top</td>
<td class="align-middle">Middle</td>
<td class="align-bottom">Bottom</td>
</tr>
</tbody>
</table><p>Text-top and text-bottom not applicable on table cells</p>
<table class="table" style="height: 200px;">
<tbody>
<tr>
<td class="align-baseline">Baseline</td>
<td class="align-top">Top</td>
<td class="align-middle">Middle</td>
<td class="align-bottom">Bottom</td>
</tr>
</tbody>
</table>