Which styling rules are applied to make the vertical align property work with divs?

Answer 1

display: table-cell

Answer 2

'display:inline-block' ( with dash and in this order ^^ ) is not really a good answer, is much more an hack, which could work in some contexts, but not every and to make vertical align work relatively to outside of the element, contrarly at 'table-cell' value wich apply a behaviour to content alignment...

Anyway, 'table-cell' is a solution by default for a long time ( before usage of 'display' css property, web designers had abused of <table> family element to make layout ), but have some disadvantages, and can be hard to handle ( if not impossible ) in some contexts...

Today, the only real good answer to the question, is 'Flex':

display:flex;
display:inline-flex;

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Answer 3

display:table-cell
display:block inline