The CSS Vertical-align Property

Use the CSS vertical-align property to control how various elements that sit next to one another on a line are displayed relative to one another. In simple terms, it’s how they are lined up. A simple example is shown below:

img {
vertical-align: middle;
}

This only works when the elements are placed along a baseline, such as either inline – e.g. span, or img — or inline block – e.g. as they are set through the use of the display property – elements.

The valid values are as follows:

baseline – The default value.
bottom – Aligns the bottom of the element, plus its descendants, with the bottom of the whole line.
top – Aligns the top of the element, plus its descendants, with the top of the whole line.
middle – Aligns the middle of the element with the middle of the lowercase letters in the parent element.
text-top – Aligns the element’s top with the top of the parent element’s font.
text-bottom – Aligns the element’s bottom with the bottom of the parent element’s font.
sub – Aligns the element’s baseline with the parent’s subscript baseline – where a sub would be placed.
super – Aligns the element’s baseline with the parent’s superscript baseline – where a sup would be placed.
length – Aligns the element’s baseline at the specified length (e.g. rem, %, px, em) above the parent’s baseline.

One common use for this property is when lining up a username and an avatar. To center both along a line you would want to use “vertical-align: middle;”. It’s important to note that this will center the text based on the deepest descender and the tallest ascender.

Each of the elements will line up based on the line you’ve established. This allows you to vary the elements that have value, as the elements have no effect on one another.

Be sure to note that the vertical-align property can be used on elements within table cells as well as in other places. Since some of the values may produce inconsistent results when used in a table, it’s best to stay with just the top, middle, and bottom locations to ensure you get the look you want in all browsers.

Can you use vertical-align to center elements vertically within another element?
No, this won’t work. Best to use Flexbox if that kind of centering is what you need.

What browsers support this function?