Press/to search

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

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.