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:
where property-value can include any of the following options: baseline, length, sub, super, top, text-top, middle, bottom, text-bottom, initial, or inherit.
The `baseline` property value is the default, in which the element is aligned with the parent element’s baseline.
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.
The `sub` property value aligns the element with the subscript baseline of the parent element, which is lower than the default.
The `super` property value aligns the element with the superscript baseline of the parent element, which is higher than the default.
The `top` property value aligns the element with the top of the highest element on the line.
The `text-top` property value aligns the element with the top of the text used in the parent element.
The `middle` property value aligns the element in the center of the parent element.
The `bottom` property value aligns the element with the lowest element on the line.
The `text-bottom` property value aligns the element with the bottom of the text used in the parent element.
The `initial` property value sets the property to its original value.
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?
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.