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.
<a href="ext.com">Link to An External Website</a><img src="ext.png" > | |
<a href="ext.com">Link to An External Website</a><img src="ext.png" style="vertical-align: top;"> (top) | |
<a href="ext.com">Link to An External Website</a><img src="ext.png" style="vertical-align: middle;"> (middle) | |
<a href="ext.com">Link to An External Website</a><img src="ext.png" style="vertical-align: bottom;"> (bottom) |

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