Name	Size	Mode	Actions
borders.md	2463	0644	editdlrm
clearfix.md	916	0644	editdlrm
close-icon.md	365	0644	editdlrm
colors.md	2741	0644	editdlrm
display.md	3971	0644	editdlrm
embed.md	1916	0644	editdlrm
flex.md.gz	2852	0644	editdlrm
float.md	1706	0644	editdlrm
image-replacement.md	968	0644	editdlrm
interactions.md	814	0644	editdlrm
overflow.md	1006	0644	editdlrm
position.md	1415	0644	editdlrm
screen-readers.md	596	0644	editdlrm
shadows.md	740	0644	editdlrm
sizing.md	2179	0644	editdlrm
spacing.md	4043	0644	editdlrm
stretched-link.md.gz	1496	0644	editdlrm
text.md.gz	1537	0644	editdlrm
vertical-align.md	1279	0644	editdlrm
visibility.md	914	0644	editdlrm

--- layout: docs title: Vertical alignment description: Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements. group: utilities --- 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. Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed. With inline elements: {{< example >}} baseline top middle bottom text-top text-bottom {{< /example >}} With table cells: {{< example >}}

baseline

top

middle

bottom

text-top

text-bottom

{{< /example >}}