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.

Name: alignment-baseline
Value: baseline | use-script | before-edge | text-before-edge | after-edge | text-after-edge |
central | middle | ideographic | alphabetic | hanging | mathematical
Initial: baseline
Applies to: inline-level elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

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;
} 

Relative articles