Skip to main content

Vertical Aligns

Version: 0.9.0
Edit

Utilities for setting the vertical alignment of an inline or inline-block element.

Keywords

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/vertical-aligns.scss#L11

Vertical Align Top
Vertical Align Middle
Vertical Align Bottom
Vertical Align Baseline
Vertical Align Text Top
Vertical Align Text Bottom
Vertical Align Text Sub
Vertical Align Text Super
<!-- vertical align top -->
<div class="u-vertical-align-top">Vertical Align Top</div>
<!-- vertical align middle -->
<div class="u-vertical-align-middle">Vertical Align Middle</div>
<!-- vertical align bottom -->
<div class="u-vertical-align-bottom">Vertical Align Bottom</div>
<!-- vertical align baseline -->
<div class="u-vertical-align-baseline">Vertical Align Baseline</div>
<!-- vertical align text top -->
<div class="u-vertical-align-text-top">Vertical Align Text Top</div>
<!-- vertical align text bottom -->
<div class="u-vertical-align-text-bottom">Vertical Align Text Bottom</div>
<!-- vertical align sub -->
<div class="u-vertical-align-sub">Vertical Align Text Sub</div>
<!-- vertical align super -->
<div class="u-vertical-align-super">Vertical Align Text Super</div>

Globals

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/vertical-aligns.scss#L72

Vertical Align Inherit
Vertical Align Initial
Vertical Align Unset
<!-- vertical align inherit -->
<div class="u-vertical-align-inherit">Vertical Align Inherit</div>
<!-- vertical align initial -->
<div class="u-vertical-align-initial">Vertical Align Initial</div>
<!-- vertical align unset -->
<div class="u-vertical-align-unset">Vertical Align Unset</div>