Vertical Alignment

Atomic classes for managing an element’s vertical-align properties.

Classes

🔗

Class	CSS
`.va-baseline`	`vertical-align: baseline;`
`.va-bottom`	`vertical-align: bottom;`
`.va-middle`	`vertical-align: middle;`
`.va-sub`	`vertical-align: sub;`
`.va-super`	`vertical-align: super;`
`.va-text-bottom`	`vertical-align: text-bottom;`
`.va-text-top`	`vertical-align: text-top;`
`.va-top`	`vertical-align: top;`
`.va-unset`	`vertical-align: unset;`

Examples

🔗

<div class="va-baseline"></div>
<div class="va-bottom"></div>
<div class="va-middle"></div>
<div class="va-sub"></div>
<div class="va-super"></div>
<div class="va-text-bottom"></div>
<div class="va-text-top"></div>
<div class="va-top"></div>
<div class="va-unset"></div>

.va-baseline

.va-bottom

.va-middle

.va-sub

.va-super

.va-text-bottom

.va-text-top

.va-top

.va-unset

Customization

Override vertical-align variables:

$vertical-aligns: baseline, bottom, middle, sub, super, text-bottom, text-top, top, unset;