CSS alignment-adjust Property
Description
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.
The alignment-adjust property has been deprecated or is no longer in any CSS working groups.
- Initial value
- auto
- Applies to
- Inline-level elements
- Inherited
- No
- Computed value
- As specified
- Animatable
- No
- JavaScript syntax
- object.style.alignmentAdjust
Syntax
alignment-adjust: auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | <percentage> | <length>
Values
- autoFor 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.
- baselineThe alignment point is at the intersection of the start-edge of the element and the dominant-baseline of the element.
- before-edgeThe 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-edgeThe alignment point is at the intersection of the start-edge of the element and the 'text-before-edge' baseline of the element.
- middleThe alignment point is at the intersection of the start-edge of the element and the 'middle' baseline of the element.
- centralThe alignment point is at the intersection of the start-edge of the element and the 'central' baseline of the element.
- after-edgeThe 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-edgeThe alignment point is at the intersection of the start-edge of the element and the 'text-after-edge' baseline of the element.
- ideographicThe alignment point is at the intersection of the start-edge of the element and the 'ideographic' baseline of the element.
- alphabeticThe alignment point is at the intersection of the start-edge of the element and the 'alphabetic' baseline of the element.
- hangingThe alignment point is at the intersection of the start-edge of the element and the 'hanging' baseline of the element
- mathematicalThe 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.
Example
.class {
alignment-adjust: middle;
}
Browser Support
The following table will show you the current browser support for the CSS alignment-adjust
property.
Desktop | |||||
? | ? | ? | ? | ? |
Tablets / Mobile | |||||
? | ? | ? | ? | ? | ? |