In this section, we will learn what the vertical-align property is and how to use it in CSS.

Click here to run the example of vertical-align property.

CSS vertical-align Property Definition and Usage

We use the CSS `vertical-align` property to vertically align inline elements like <span>, <img>, <input>, <a> etc.

Note: We can also use this property to vertically align text content in a table cell as well.

CSS vertical-align Property Syntax

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

CSS vertical-align Property Value

Values can be set for this property are as follows:

• baseline
• sub
• super
• top
• text-top
• middle
• bottom
• text-bottom

Also, you can use numbers with CSS supported units for this property.

Example: aligning text vertically CSS

See the Pen aligning text vertically CSS by Omid Dehghan (@enjoytutorials1) on CodePen.