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.

  • Initial valueauto
  • Applies toInline-level elements
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.alignmentAdjust
Formal syntax: auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | <percentage> | <length>

alignment-adjust: [value];
alignment-adjust: 10%; /* Percentage */
alignment-adjust: 5px; /* Length */
  • 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.
.class {
   alignment-adjust: middle;
}
?Firefox?Explorer?Chrome?Safari?Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.