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.
Text-top: The top of the image is lined up with the top of the text.
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’.
Middle: Aligns centrally to text.
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.