CSS alignment-adjust Property

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.

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

?

?

?

?

?

• Share on Facebook
• Share on Twitter
• Share on Google+