vertical-align
Controls vertical alignment of inline elements and table cells. Only works on inline, inline-block, table-cell; not block elements.
Class List
| Class | CSS | Description |
|---|---|---|
vat | vertical-align: top | Align to top of line box |
vam | vertical-align: middle | Align to parent baseline + x-height/2 |
vab | vertical-align: bottom | Align to bottom of line box |
vabl | vertical-align: baseline | Align to parent baseline (default) |
vasb | vertical-align: sub | Align to subscript position |
vasp | vertical-align: super | Align to superscript position |
vatb | vertical-align: text-bottom | Align to parent font text-bottom |
vatt | vertical-align: text-top | Align to parent font text-top |
vau | vertical-align: unset | Reset to initial value |
Visual Comparison
Compares each vertical-align value on inline elements.
Top — vat
Middle — vam
Bottom — vab
Baseline (default value) — vabl
Sub — vasb
Super — vasp
When to Use What?
| Situation | Recommended | Reason |
|---|---|---|
| Top alignment in table cells | vat | Pins cell content to the top |
| Inline alignment of icon plus text | vam | Vertical centering in an inline context |
| Aligning images with text | vam | Removes the bottom gap under images |
| Subscript in chemical formulas | vasb | Notation like H₂O |
| Superscript for footnotes | vasp | Notation for reference numbers |
Class Details
vatvertical-align: top
Aligns top of element with top of line box. Common for top-aligning table cell content.
<!-- Table cell top alignment -->
<div class="dt w100p">
<div class="dtc vat p16px bg18181B">Short content</div>
<div class="dtc vat p16px bg27272A">When long content spans multiple
lines, it still
aligns to the top</div>
</div>vamvertical-align: middle
Aligns to parent baseline + x-height/2. Useful for icon-text vertical alignment.
<!-- Icon + text inline alignment -->
<p>
Settings
<img class="vam" src="/icon.svg" width="16" height="16" />
Completed
</p>Caution
vam is not perfect centering. For precise vertical centering, use df aic.
vabvertical-align: bottom
Aligns bottom of element with bottom of line box.
<!-- Bottom alignment -->
<p class="fs3-2rem">
Large text <span class="vab fs14px c71717A">Bottom aligned</span>
</p>vablvertical-align: baseline
Default. Aligns element baseline with parent baseline. Natural alignment for text and inline elements.
<!-- Default baseline alignment -->
<p class="fs3-2rem">
Large text <span class="vabl fs14px c71717A">baseline</span>
</p>vasbvertical-align: sub
Aligns to subscript position. For chemical formulas.
<!-- Subscript (chemical formula) -->
<p class="fs2rem">
H<span class="vasb fs14px">2</span>O
CO<span class="vasb fs14px">2</span>
</p>vaspvertical-align: super
Aligns to superscript position. For footnotes, exponents.
<!-- Superscript (footnote) -->
<p class="fs16px">
This sentence has a footnote<span class="vasp fs12px c6366F1">[1]</span>
</p>vatbvertical-align: text-bottom
Aligns bottom with parent font text-bottom.
<!-- text-bottom alignment -->
<p class="fs3-2rem">
Large text <span class="vatb fs14px c71717A">text-bottom</span>
</p>vattvertical-align: text-top
Aligns top with parent font text-top.
<!-- text-top alignment -->
<p class="fs3-2rem">
Large text <span class="vatt fs14px c71717A">text-top</span>
</p>vauvertical-align: unset
Resets vertical-align to initial. For resetting inherited values.
<!-- Reset inherited value -->
<span class="vau">Reset vertical-align</span>Tips & Notes
Does not work on block elements
vertical-align only works on inline, inline-block, table-cell. For block vertical alignment, use df aic.
Icon + text alignment
Apply vam to both for inline icon-text alignment. For more precision, use dif aic.