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