Skip to main content
X

Explore your training options in 10 minutes

CSS Vertical Align Property

Christina Kopecky - December 29, 2020


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.

Get offers and scholarships from top coding schools illustration

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

MacBook Air next to a teapot and mug.
Let’s discuss how each property value changes the element alignment.

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.

Venus, a software engineer at Rockbot

"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 .

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content