This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.



Specifies how an element is aligned with respect to its parent; that is, specifies which baseline of the element is to be aligned with the corresponding baseline of the parent. Defaults to the baseline with the same name as the computed value of the alignment-baseline property.

Applies to svg/attributes
Name: alignment-baseline Value: baseline


Using ‘middle’ for both alignment-baseline and text-anchor is convenient for positioning text centered upon a spot regardless of size and length.

<text x="80" y="30" font-size="20"
  text-anchor="middle" alignment-baseline="middle">
    Right in the middle!



This property specifies how an object is aligned with respect to its parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the alignment-baseline property. That is, the position of “ideographic” alignment-point in the block-progression-direction is the position of the “ideographic” baseline in the baseline-table of the object being aligned. One of the characteristics of international text is that there are different baselines (different alignment points) for glyphs in different scripts. For example, in horizontal writing, ideographic scripts, such as Han Ideographs, Katakana, Hiragana, and Hangul, alignment occurs with a baseline near the bottoms of the glyphs; alphabetic based scripts, such as Latin, Cyrillic, Hebrew, Arabic, align a point that is the bottom of most glyphs, but some glyphs descend below the baseline; and Indic based scripts are aligned at a point that is near the top of the glyphs. The “EM box” is a relative measure of the height of the glyphs in the font. The “M” character fits in a box 1 EM high and 1 EM wide.


alignment-baseline: auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit

Standards information

Related specifications

SVG 1.1
W3C Recommendation

See also

Related pages