alignment-baseline property CSS Reference

Definition and Usage

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

Note: The 'alignment-adjust' property specifies how the alignment point is determined and defaults to the baseline with the same name as the computed value of the alignment-baseline property.

Except for 'use-script', all baseline values refer to the respective baseline-identifier components of the dominant-baseline of the parent, and glyphs within the element are aligned similarly to the element itself. The description for 'use-script' covers these points specifically.

Syntax

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

Values

baseline

The alignment-point of the element being aligned is aligned with the dominant baseline of the parent.

use-script

If 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. The baseline-identifier position is determined by using the relevant information related to the parent element dominant-baseline set. The alignment point of the element itself is aligned as for the 'baseline' value.

before-edge

The alignment point of the box is aligned with the 'before-edge' baseline of the line box.

text-before-edge

The alignment-point of the element being aligned is aligned with the 'text-before-edge' baseline of the parent.

after-edge

The alignment point of the box is aligned with the 'after-edge' baseline of the line box.

text-after-edge

The alignment-point of the element being aligned is aligned with the 'text-after-edge' baseline of the parent.

central

The alignment point of the box is aligned with the 'central' baseline of the parent.

middle

The alignment point of the box is aligned with the 'middle' baseline of the parent.

ideographic

The alignment-point of the element being aligned is aligned with the 'ideographic' baseline of the parent.

alphabetic

The alignment-point of the element being aligned is aligned with the lower baseline of the parent.

hanging

The alignment-point of the element being aligned is aligned with the hanging baseline of the parent.

mathematical

The alignment-point of the element being aligned is aligned with the mathematical baseline of the parent.

Examples

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