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