alignment-adjust property CSS Reference



Definition and Usage

The 'alignment-adjust' property allows more precise alignment of elements, such as graphics, that do not have a baseline-table or lack the desired baseline in their baseline-table. With the 'alignment-adjust' property, the position of the baseline identified by the 'alignment-baseline' can be explicitly determined. It also determines precisely the alignment point for each glyph within a textual element. The user agent should use heuristics to determine the position of a non existing baseline for a given element.

Name: alignment-adjust
Value: auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | <percentage> | <length>
Initial: auto
Applies to: inline-level elements
Inherited: no
Percentages: refers to the 'line-height' of the element
Media: visual
Computed value: see text

Syntax

alignment-adjust : auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | <percentage> | <length>;

Values

auto
For each glyph corresponding to textual information within the element, the alignment-point is the intersection of the start-edge of the glyph box and the block-progression-direction position of the alignment point from the font. Padding, border or margin do not affect that alignment point. The alignment point of the inline-level element itself is at the intersection of the start-edge of the first inline box and the baseline identified by the 'alignment-baseline' property if this baseline exists in the baseline-table for the element dominant-baseline. If that specific baseline does not exist, the user agent may use heuristics to determine where that missing baseline would be. For other inline box content like images, the user agent will use heuristics to determine the position of the alignment point. For example when the resulting baseline is 'alphabetic' or 'ideographic', it is expected that the alignment point will be at the intersection of the start-edge and the after-edge of the inline box, including its respective margin. If the resulting baseline is 'hanging', the intersection of the start-edge and the before-edge of the inline box, including its respective margin should be used instead.
When the 'alignment-baseline' property is set to either 'after-edge' or 'before-edge', the 'alignment-adjust: auto' value is equivalent to 'after-edge' or 'before-edge' respectively.
baseline
The alignment point is at the intersection of the start-edge of the element and the dominant-baseline of the element.
before-edge
The alignment point is at the intersection of the start-edge of the element and the before-edge of the extended inline box of the element. This may include or not the line-height of the element, depending on the line-stacking-strategy.
text-before-edge
The alignment point is at the intersection of the start-edge of the element and the 'text-before-edge' baseline of the element.
central
The alignment point is at the intersection of the start-edge of the element and the 'central' baseline of the element.
middle
The alignment point is at the intersection of the start-edge of the element and the 'middle' baseline of the element.
after-edge
The alignment point is at the intersection of the start-edge of the element and the after-edge of the extended inline box of the element. This may include or not the line-height of the element, depending on the line-stacking-strategy.
text-after-edge
The alignment point is at the intersection of the start-edge of the element and the 'text-after-edge' baseline of the element.
ideographic
The alignment point is at the intersection of the start-edge of the element and the 'ideographic' baseline of the element.
alphabetic
The alignment point is at the intersection of the start-edge of the element and the 'alphabetic' baseline of the element.
hanging
The alignment point is at the intersection of the start-edge of the element and the 'hanging' baseline of the element.
mathematical
The alignment point is at the intersection of the start-edge of the element and the 'mathematical' baseline of the element.
<percentage>
The computed value of the property is this percentage multiplied by the computed 'line-height' of the element. The alignment point is on the start-edge of the inline box. Its position along the start-edge relative to the intersection of the dominant-baseline and the start-edge is offset by the computed value. The offset is opposite to the shift-direction (positive value) or in the shift-direction (negative value). A value of '0%' makes the dominant-baseline the alignment point.
<length>
The alignment-point is on the start-edge of the inline box. Its position along the start-edge relative to the intersection of the dominant-baseline and the start-edge is offset by the <length> value. The offset is opposite to the shift-direction (positive value) or in the shift-direction (negative value). A value of '0cm' makes the dominant-baseline the alignment point.

Examples

.img {
    alignment-adjust: middle;
}

Relative articles