| 1 |
efrain |
1 |
---
|
|
|
2 |
layout: docs
|
|
|
3 |
title: Vertical alignment
|
|
|
4 |
description: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
|
|
|
5 |
group: utilities
|
|
|
6 |
---
|
|
|
7 |
|
|
|
8 |
Change the alignment of elements with the [`vertical-alignment`](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
|
|
|
9 |
|
|
|
10 |
Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
|
|
|
11 |
|
|
|
12 |
With inline elements:
|
|
|
13 |
|
|
|
14 |
{{< example >}}
|
|
|
15 |
<span class="align-baseline">baseline</span>
|
|
|
16 |
<span class="align-top">top</span>
|
|
|
17 |
<span class="align-middle">middle</span>
|
|
|
18 |
<span class="align-bottom">bottom</span>
|
|
|
19 |
<span class="align-text-top">text-top</span>
|
|
|
20 |
<span class="align-text-bottom">text-bottom</span>
|
|
|
21 |
{{< /example >}}
|
|
|
22 |
|
|
|
23 |
With table cells:
|
|
|
24 |
|
|
|
25 |
{{< example >}}
|
|
|
26 |
<table style="height: 100px;">
|
|
|
27 |
<tbody>
|
|
|
28 |
<tr>
|
|
|
29 |
<td class="align-baseline">baseline</td>
|
|
|
30 |
<td class="align-top">top</td>
|
|
|
31 |
<td class="align-middle">middle</td>
|
|
|
32 |
<td class="align-bottom">bottom</td>
|
|
|
33 |
<td class="align-text-top">text-top</td>
|
|
|
34 |
<td class="align-text-bottom">text-bottom</td>
|
|
|
35 |
</tr>
|
|
|
36 |
</tbody>
|
|
|
37 |
</table>
|
|
|
38 |
{{< /example >}}
|