vertical-align are set to the inline element or on a inline-block element which behave like a block-level element.
The valid values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, or a value in percentage.
The default value of vertical-align, is baseline. Images will line up with the text at the baseline of the text.
it can centering the pixel height of the text with the pixel height of the image.Be aware that if the image is larger than the current font-size and line-height, it will push the following lines down if need be
Different from the baseline of type, is the bottom of text, where the descenders go down to. Images can be aligned with this depth
Opposite of text-bottom, is text-top, the highest point of the current font-size. You can align to this as well.
Top & Bottom
Top and Bottom work similarly to text-top and text-bottom, but they are not constrained by text but rather by anything at all on that line (like another image). So if there were two images on the same line, of different heights and both larger than the text on that line, their tops (or bottoms) would align regardless of that text size.
Sub & Super
These values stand for superscript and subscript, so elements aligned with their superscript and subscript