Vertical alignment

Atomic vertical alignment classes allow you to change an element’s vertical alignment quickly.

Classes

Class	Output
`.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;`

Note: The unset property is a combination property that resets a property to its inherited value. It behaves like the inherit and the initial keywords, but it properly selects the right value for you. Unfortunately, unset is not fully supported in Internet Explorer. Because of this all unset values have the correct inherit or initial value applied.

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