FANDOM


The vertical-align property is used in CSS and certain HTML elements. It specifies the vertical alignment of an inline or table-cell element.

Values for inline elements

Most of the values vertically align the element relative to its parent element.
  • baseline - Aligns the baseline of the element with the baseline of its parent.
  • sub - Aligns the baseline of the element with the subscript-baseline of its parent.
  • super - Aligns the baseline of the element with the superscript-baseline of its parent.
  • text-top - Aligns the top of the element with the top of the parent element's font.
  • text-bottom - Aligns the bottom of the element with the bottom of the parent element's font.
  • middle - Aligns the middle of the element with the middle of lowercase letters in the parent.
  • <length> - Aligns the baseline of the element at the given length above the baseline of its parent. Ex. px, em, etc.
  • <percentage> - Like <length> values, with the percentage being a percent of the line-height property.

For elements that do not have a baseline, the bottom margin edge is used instead. However, two values vertically align the element relative to the entire line rather than relative to its parent.

  • top - Aligns the top of the element and its descendants with the top of the entire line.
  • bottom - Aligns the bottom of the element and its descendants with the bottom of the entire line.

Negative values are allowed for all values.

Values for table-cell elements

  • baseline, sub, super, text-top, text-bottom, <length>, or <percentage> - Aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
  • top - Aligns the top padding edge of the cell with the top of the row.
  • middle - Centers the padding box of the cell within the row.
  • bottom - Aligns the bottom padding edge of the cell with the bottom of the row.

Negative values are allowed for all values.


HTML example:

<img style="vertical-align:bottom;" src="Image1.png" />


CSS example:

img {
     vertical-align:bottom;
}

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.