CSS Vertical Align Property
When writing CSS, you may encounter a situation where you would like to change how an element is aligned on the page. In this article, we will explore the CSS property and the property values that will alter how an element is vertically aligned.
The syntax for the property is as follows:
vertical-align: property-value;
where property-value can include any of the following options: baseline, length, sub, super, top, text-top, middle, bottom, text-bottom, initial, or inherit.
Find Your Bootcamp Match
- Career Karma matches you with top tech bootcamps
- Access exclusive scholarships and prep courses
By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.
Property Values
baseline
The `baseline` property value is the default, in which the element is aligned with the parent element’s baseline.
length
The `length` property value raises or lowers the element by a specified length, whether that length is denoted in centimeters, pixels or ems. The element will be raised if the value is positive, and lowered if the value is negative. Similarly, the element can be raised or lowered using a positive or negative percentage.
sub
The `sub` property value aligns the element with the subscript baseline of the parent element, which is lower than the default.
super
The `super` property value aligns the element with the superscript baseline of the parent element, which is higher than the default.
top
The `top` property value aligns the element with the top of the highest element on the line.
text-top
The `text-top` property value aligns the element with the top of the text used in the parent element.
middle
The `middle` property value aligns the element in the center of the parent element.
bottom
The `bottom` property value aligns the element with the lowest element on the line.
text-bottom
The `text-bottom` property value aligns the element with the bottom of the text used in the parent element.
initial
The `initial` property value sets the property to its original value.
inherit
The `inherit` property value gets its alignment properties from the parent element.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
Those are all of the property values and their effects on alignment! What property values have you implemented in your CSS?
Conclusion
In this article, we discussed how to vertically align an element on a page using CSS. If you’re new to CSS, check out our introductory articles, What is CSS? An Intro to Cascading Style Sheets and Beginner’s Guide to Learning CSS .
