Getting vertically-aligned

Vertical-align is a pretty useful property at times, but could easily be assumed to align any element centrally, but there’s a catch it will only work on inline elements.

A simple example of vertical-align would be to align an image to text. This is great for aligning an icon with a title or a button. There are a few values that can be used: baseline, sub, super, text-top, text-bottom, middle, top and bottom.

Vertical-align properties

Baseline: The bottom of the image is aligned to the baseline of the text.

Baseline

Text-top: The top of the image is lined up with the top of the text.

text-top

Text-bottom: The bottom of the image lines up with the bottom or the text – this differs from baseline as it will align to the absolute bottom of the text: i.e. where the characters extend down to, like the bottom of a ‘p’.

text-bottom

Middle: Aligns centrally to text.

Middle

Top and bottom: These are similar to text-top and text-bottom, but will align to top and bottom of the element, rather than the font.

Sub andsSuper: This will align the image to the baseline of the subscript or superscript text.

For more in-depth look at vertical-align, see this MDN article: developer.mozilla.org/en-US/docs/CSS/vertical-align.