The vertical-align property works only on inline or inline-block elements and table cells and when not used on a table cell, it will affect the alignment of the element itself, not the element's contents.

Where does vertical-align work?

The vertical-align property works only on inline or inline-block elements and table cells and when not used on a table cell, it will affect the alignment of the element itself, not the element's contents.

What does vertical-align middle do?

The CSS just sizes the div, vertically center aligns the span by setting the div's line-height equal to its height, and makes the span an inline-block with vertical-align: middle. Then it sets the line-height back to normal for the span, so its contents will flow naturally inside the block.