vertical align explanation

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