Typography

Vertical Align

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

Class

Usage

Set element vertical alignment to top.

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 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 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 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.