CSS alignment-baseline Property

Description

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 value
baseline
Applies to
Inline-Level elements
Inherited
No
Media
Visual
Computed value
Specified value
Animatable
No
CSS Version
CSS3
JavaScript syntax
object.style.alignmentBaseline

Syntax

alignment-baseline: baseline | use-script | before-edge | text-before-edge | after-edge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematical

Values

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

Example

.img {
   alignment-baseline: after-edge;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
??????
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
??????