I’ve seen CSS vertical-align used only in table cells before, also, in the centering technique where an element with a display:table parent gets display:table-cell and vertical-align:middle to center its contents, vertically. But who knew, this property is even more useful in a place that’s not a table cell…

…but an inline box. Most notably, inline images, the kind you add beside a text. For example, social media icons followed by user handles or the media names, download links followed by icons of the file type that’ll be downloaded, or anchor texts followed by symbols to caution if they’re linked to external sites.

These images need vertical-align to align themselves inside the line boxes in a placement we want, like at the top of the line, or bottom.

Other possible values for vertical-align are: sub, super, baseline, text-top, and text-bottom.