mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
51 lines
2.1 KiB
Plaintext
51 lines
2.1 KiB
Plaintext
---
|
|
title: Vertical align
|
|
description: Utility classes for the vertical-align property on inline and table-cell elements.
|
|
summary: Set the vertical alignment of inline, inline-block, inline-table and table-cell elements with a class.
|
|
related: [/ui/utilities/margins]
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
|
|
Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
|
|
|
|
## Inline elements
|
|
|
|
Use these classes on inline elements, such as an [icon](/ui/components/icon) or a [badge](/ui/components/badge) next to text, to move them up or down relative to the text line.
|
|
|
|
<Example>
|
|
<div>
|
|
<span class="align-baseline">baseline</span>
|
|
<span class="align-top">top</span>
|
|
<span class="align-middle">middle</span>
|
|
<span class="align-bottom">bottom</span>
|
|
<span class="align-text-top">text-top</span>
|
|
<span class="align-text-bottom">text-bottom</span>
|
|
</div>
|
|
</Example>
|
|
|
|
## Table cells
|
|
|
|
The same classes work on table cells and move the content of a cell to the top, middle or bottom of the row.
|
|
|
|
<Example>
|
|
<table style="height: 100px" class="bg-surface">
|
|
<tbody>
|
|
<tr>
|
|
<td class="align-baseline border">baseline</td>
|
|
<td class="align-top border">top</td>
|
|
<td class="align-middle border">middle</td>
|
|
<td class="align-bottom border">bottom</td>
|
|
<td class="align-text-top border">text-top</td>
|
|
<td class="align-text-bottom border">text-bottom</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</Example>
|
|
|
|
## Accessibility
|
|
|
|
- Vertical alignment changes where an element sits on the line, not what it means. An icon aligned with `align-middle` still needs a name if it carries information.
|
|
- These utilities only work on inline, inline-block and table-cell elements. On a flex or grid child they do nothing - use `align-items` there instead.
|
|
- Aligning an icon next to text does not make the two one thing. Keep them inside the same element, or the icon is read separately from the label.
|
|
- Do not lower the line height to make alignment look tighter. Users need that space to track lines of text.
|