Typography

Vertical Align

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

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
align-top	vertical-align: top
align-baseline	vertical-align: baseline
align-middle	vertical-align: middle
align-bottom	vertical-align: bottom
align-text-top	vertical-align: text-top
align-text-bottom	vertical-align: text-bottom

Usage

Set element vertical alignment to top.

Text

Text Text Text

<div>
  ...
  <img class="align-top ... inline-block" src="...">
  ...
</div>

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

HTML

img {
  @extend
    .align-top,
    .inline-block;
}

SCSS

Set element vertical alignment to bottom.

Text

Text Text Text

<div>
  ...
  <img class="align-bottom ... inline-block" src="...">
  ...
</div>

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

HTML

img {
  @extend
    .align-bottom,
    .inline-block;
}

SCSS

Set element vertical alignment to baseline.

Text

Text Text Text

<div>
  ...
  <img class="align-baseline ... inline-block" src="...">
  ...
</div>

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

HTML

img {
  @extend
    .align-baseline,
    .inline-block;
}

SCSS

Set element vertical alignment to middle.

Text

Text Text Text

<div>
  ...
  <img class="align-middle ... inline-block" src="...">
  ...
</div>

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

HTML

img {
  @extend
    .align-middle,
    .inline-block;
}

SCSS