Typography

Vertical Align

Utilities for sets the vertical alignment of an inline or table-cell box.


Class

classcss
align-baselinevertical-align: baseline
align-topvertical-align: top
align-middlevertical-align: middle
align-bottomvertical-align: bottom
align-text-topvertical-align: text-top
align-text-bottomvertical-align: text-bottom

Usage

Set element vertical alignment to top.

Text TextText Text Text
<!-- Example -->
<y>
...
<img class="align-top ... inline-block"
src="...">

...
</y>

<y>
...
<y class="align-top ... inline-block">
...
</y>
...
</y>

Set element vertical alignment to bottom.

Text TextText Text Text
<!-- Example -->
<y>
...
<img class="align-bottom ... inline-block"
src="...">

...
</y>

<y>
...
<y class="align-bottom ... inline-block">
...
</y>
...
</y>

Set element vertical alignment to baseline.

Text TextText Text Text
<!-- Example -->
<y>
...
<img class="align-baseline ... inline-block"
src="...">

...
</y>

<y>
...
<y class="align-baseline ... inline-block">
...
</y>
...
</y>

Set element vertical alignment to middle.

Text TextText Text Text
<!-- Example -->
<y>
...
<img class="align-middle ... inline-block"
src="...">

...
</y>

<y>
...
<y class="align-middle ... inline-block">
...
</y>
...
</y>

Variant

VariantEnabledResponsive
DefaultYesYes
Dark Theme
hover
group-hover
focus
focus-visible
focus-within
active
visited
checked
disabled