Vertical align

Utilities for vertical alignment of inline and inline-block elements.

Quick reference

Class	Styles
af-align-top	vertical-align: top
af-align-middle	vertical-align: middle
af-align-bottom	vertical-align: bottom
af-align-baseline	vertical-align: baseline

Examples

Inline alignment

Top Middle Bottom Baseline

<div style="line-height: 2.5rem;">
  <span class="af-badge af-align-top">
    Top
  </span>
  <span class="af-badge af-align-middle">
    Middle
  </span>
  <span class="af-badge af-align-bottom">
    Bottom
  </span>
  <span class="af-badge af-align-baseline">
    Baseline
  </span>
  <span style="display:inline-block; height: 2.5rem; border-left: 1px dashed var(--af-color-border); margin-left: var(--af-space-2); vertical-align: middle;">
  </span>
</div>

Responsive variants

All vertical-align utilities support responsive variants using the @{bp} suffix. See Responsive Suffix for syntax and breakpoints.

Related

• Display