The alignment-baseline property specifies how an inline-level element is aligned with respect to its parent. That is, to which of the parent's baselines the alignment point of this element is aligned. Unlike the 'dominant-baseline' property the 'alignment-baseline' property has no effect on its children dominant-baselines.

  • Initial valuebaseline
  • Applies toInline-Level elements
  • InheritedNo
  • MediaVisual
  • Computed valueSpecified value
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.alignmentBaseline
Formal syntax: baseline | use-script | before-edge | text-before-edge | after-edge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematical

alignment-baseline: [value];
  • baselineThe alignment-point of the element being aligned is aligned with the dominant baseline of the parent.
  • use-scriptIf the element 'script' property value is 'auto', the alignment point of each glyph is aligned with the baseline-identifier of the script to which the glyph belongs. If the element 'script' property value is other than 'auto', the alignment point of each glyph is aligned with the baseline-identifier specified by the 'script' property.
  • before-edgeThe alignment point of the box is aligned with the 'before-edge' baseline of the line box.
  • text-before-edgeThe alignment-point of the element being aligned is aligned with the 'text-before-edge' baseline of the parent.
  • after-edgeThe alignment point of the box is aligned with the 'after-edge' baseline of the line box.
  • text-after-edgeThe alignment-point of the element being aligned is aligned with the 'text-after-edge' baseline of the parent.
  • centralThe alignment point of the box is aligned with the 'central' baseline of the parent.
  • middleThe alignment point of the box is aligned with the 'middle' baseline of the parent.
  • ideographicThe alignment-point of the element being aligned is aligned with the 'ideographic' baseline of the parent.
  • alphabeticThe alignment-point of the element being aligned is aligned with the lower baseline of the parent.
  • hangingThe alignment-point of the element being aligned is aligned with the hanging baseline of the parent.
  • mathematicalThe alignment-point of the element being aligned is aligned with the mathematical baseline of the parent.
.img {
   alignment-baseline: after-edge;
}
?Firefox?Explorer?Chrome?Safari?Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.