| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 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 | {% capture 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 | {% endcapture %} | |
| 22 | {% include example.html content=example %} | |
| 23 | ||
| 24 | With table cells: | |
| 25 | ||
| 26 | {% capture example %} | |
| 27 | <table style="height: 100px;"> | |
| 28 | <tbody> | |
| 29 | <tr> | |
| 30 | <td class="align-baseline">baseline</td> | |
| 31 | <td class="align-top">top</td> | |
| 32 | <td class="align-middle">middle</td> | |
| 33 | <td class="align-bottom">bottom</td> | |
| 34 | <td class="align-text-top">text-top</td> | |
| 35 | <td class="align-text-bottom">text-bottom</td> | |
| 36 | </tr> | |
| 37 | </tbody> | |
| 38 | </table> | |
| 39 | {% endcapture %} | |
| 40 | {% include example.html content=example %} | |
