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
Edge Chrome Firefox Opera Safari
?????
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
??????