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.

The alignment-baseline property has been deprecated or is no longer in any CSS working groups.

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
?	?	?	?	?	?
Tablets / Mobile
?	?	?	?	?	?