vertical-align property is used to specify the vertical alignment of an inline level elements or table-cell box. Inline-level elements include images, text, buttons, etc. and any element with display: inline or display: inline-block.
The initial value of CSS
vertical-align property is
baseline. You can only apply it to
table-cell elements. It also applies to
::first-line. This property is not inheritable. The final computed value of this property is an absolute length for percentage and length values, otherwise, the computed value is the specified keyword itself. This property is animatable as a length.
This is the formal syntax for using the CSS
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Here are some examples of using this property.
/* keyword values */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <length> values */ vertical-align: 10em; vertical-align: 4px; /* <percentage> values */ vertical-align: 20%; /* Global values */ vertical-align: inherit; vertical-align: initial; vertical-align: unset;
This is the default value. It aligns the baseline of the element with the baseline of its parent. If the element does not have a baseline, it aligns the bottom margin edge with the line’s baseline.
The baseline of some replaced elements, like
<textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may change from one browser to the other.
In this case, the vertical midpoint of the element is aligned with the baseline of the line plus half the x-height of the line (determined by the font).
This value aligns the baseline of the element with the subscript-baseline of its parent. In other words, it will lower the baseline of the element to the proper position for subscripts on the line.
This value aligns the baseline of the element with the superscript-baseline of its parent. In other words, it will raise the baseline of the element to the proper position for superscripts on the line.
This value aligns the top of the element with the top of the parent element’s font. If more than one font is used, this element will be placed just above the highest ascender of all the fonts.
This value aligns the bottom of the element with the bottom of the parent element’s font. If more than one font is used, this line will be just below the lowest descender of all the fonts.
This value aligns the top of the element and its descendants with the top of the entire line. This means that if there are other elements on the line each with different heights, like multiple images, for example, the top of the line will be as high as the highest of the two images.
This value aligns the element and its descendants with the bottom of the entire line.
This value raises the element above the baseline when the percentage value is positive and lower the element below the baseline when the percentage value is negative. The percentage specified is treated as a percentage of the line-height value.
This value raises the element above the baseline when the length value is positive and lowers the element below the baseline when the length value is negative. A value ‘0’ implies that the element should be aligned with the baseline.
The vertical-align property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.
- Read more about the CSS
<vertical-align>property on MDN.
- You can also read the CSS
<vertical-align>property on W3C.
2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.