Vertical Align

vel-src: typography.css

Utilities for controlling the vertical alignment of inline or table-cell content.

Class	Properties
vel-align-baseline	vertical-align: baseline
vel-align-top	vertical-align: top
vel-align-middle	vertical-align: middle
vel-align-bottom	vertical-align: bottom
vel-align-text-top	vertical-align: text-top
vel-align-text-bottom	vertical-align: text-bottom
vel-align-sub	vertical-align: sub
vel-align-super	vertical-align: super

Examples

Aligning inline elements

top middle bottom

example.html

<div style="background:#060b17;padding:1.25rem;border-radius:0.5rem;line-height:3rem">
  <span class="vel-bg-surface-3 vel-rounded-sm vel-inline-block" style="width:3rem;height:3rem"></span>
  <span class="vel-align-top vel-text-base" style="margin:0 0.5rem">top</span>
  <span class="vel-bg-surface-3 vel-rounded-sm vel-inline-block" style="width:3rem;height:3rem"></span>
  <span class="vel-align-middle vel-text-base" style="margin:0 0.5rem">middle</span>
  <span class="vel-bg-surface-3 vel-rounded-sm vel-inline-block" style="width:3rem;height:3rem"></span>
  <span class="vel-align-bottom vel-text-base" style="margin:0 0.5rem">bottom</span>
</div>

Superscript and subscript alignment

E = mc² H₂O

example.html

<p class="vel-text-base" style="background:#060b17;padding:1rem;border-radius:0.5rem;font-size:1.1rem">
  E = mc<sup class="vel-align-super" style="font-size:0.7em">2</sup>
  &nbsp;&nbsp;
  H<sub class="vel-align-sub" style="font-size:0.7em">2</sub>O
</p>

Middle-align icon with text

Icon aligned with text

example.html

<div class="vel-text-base" style="background:#060b17;padding:1rem;border-radius:0.5rem">
  <span class="vel-align-middle vel-bg-primary vel-rounded-sm vel-inline-block" style="width:1.25rem;height:1.25rem;margin-right:0.5rem"></span>
  <span class="vel-align-middle">Icon aligned with text</span>
</div>