CSS vertical-align Property

The CSS 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 inline-level and table-cell elements. It also applies to ::first-letter and ::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.

Syntax

This is the formal syntax for using the CSS vertical-align property:

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;

Acceptable Values

baseline

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.

middle

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

sub

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.

super

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.

text-top

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.

text-bottom

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.

top

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.

bottom

This value aligns the element and its descendants with the bottom of the entire line.

<percentage>

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.

<length>

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.

Working Examples

Browser Support

The vertical-align property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Further Reading

  1. Read more about the CSS <vertical-align> property on MDN.
  2. You can also read the CSS <vertical-align> property on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

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.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top