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-within
active
visited
checked
disabled