How to vertically align text with CSS?

The vertical-align property in CSS is used to define the vertical alignment of an inline or table-cell box. It is one of the self-explanatory properties of CSS.

The vertical-align CSS property controls how the elements set next to each other. When this property applies to the table cells, then instead of affecting the cell itself, it affects the cell content.

This property has multiple valid values: baseline, top, bottom, middle, text-top, text-bottom, sub, super, and length(in px, cm, em, etc.). The sub and super values of this property are generally used for the subscript and superscript of text.

This CSS property can be used to align the content of a cell in a table vertically. It can vertically align an image in a line of text. This property cannot be used to align the block-level elements vertically.

Let's understand this property by using some illustrations.

Example

Output

Now, there is another example in which we are aligning the text with image.

Example

Output