Vertical Alignement

vertical-align is relative to the text line of inlined elements (img id default of type inline), not to the container height...

text

The only other behaviour of vertical-align is in td (table cell) context (in a table structure)

text

... but works properly only if not different line-height of many elements (ie: the block element will be vertical aligned, but inside the inlined content, the different elements are vertical aligned regarding the text-line (and so the line-height)

Anyway, without specifying height of cell, the element will define height of cell, so vertical align is not very useful, appart with value bottom to disable the little space corresponding to the default baseline value ;) (second img in last row)

text

text

The other (new) way to vertical align element is to use the new flex box model with display:flex and align-items property (which control alignement in the main flex content stream order -- default row)...

text

... notice that spaces are not treated as in standard box model ^^