Interactive online courses HTML Academy
2026-03-09 10:53 Diff
https://htmlacademy.org/courses/html-css-basics/typography/vertical-align

If we have a property for horizontal alignment, then shouldn’t there also be one for vertical alignment? Yes, this is what the vertical-align property is for.

This property can be used to align inline elements for a particular line. The simplest example that we will explore in this assignment is to align the <img> image vertically in a text line.

The vertical-align property can be given many values, but the most often used ones are:

  1. top – It aligns the content along the top edge of the line;
  2. middle — It aligns the content along the middle of the line;
  3. bottom — It aligns the content along the bottom edge of the line;
  4. baseline — It aligns the content along the baseline of the line (default value).

Unlike the text-align property, the vertical-align property is applied to the element itself and not to its container:

HTML: <p> <img src="picture.png" alt="I’m a picture"> I am text inside a paragraph </p> CSS: img { vertical-align: middle; }

In addition to keywords for vertical-align, you also have the ability to set the values in pixels and percentages.

The percentage value (for example, vertical-align: 100%) is calculated relative to the specified height of the line (line-height). A value of 0% is the same as the baseline, and it can be both positive and negative.

The value in pixels (for example, vertical-align: 10px) works similarly to a percentage, only it is calculated in pixels that are either added or subtracted. The 0px value is equivalent to baseline.