tabler/docs/content/ui/utilities/vertical-align.md

title, description, summary

title	description	summary
Vertical align	Quickly and easily align elements vertically with utility classes.	Easily modify the vertical alignment of elements such as inline, inline-block, inline-table, and table-cell to ensure proper positioning and alignment within their parent containers, allowing for more precise control over your layout and design.

Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

Inline elements

Use vertical alignment utilities to align inline-level elements relative to their surrounding text or baseline. These classes are particularly useful for aligning small inline elements like icons or badges alongside text.

{% capture html -%}

baseline top middle bottom text-top text-bottom

{%- endcapture %} {% include "docs/example.html" html=html %}

Table cells

Vertical alignment utilities are also applicable to table cells, allowing you to control the alignment of content within a cell. This is especially useful for creating well-structured and visually appealing tables where the content aligns consistently across rows and columns.

{% capture html -%}

baseline

top

middle

bottom

text-top

text-bottom

{%- endcapture %} {% include "docs/example.html" html=html %}