alignment-baseline

The alignment-baseline attribute specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the 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.

Note: As a presentation attribute alignment-baseline can be used as a CSS property.

As a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <tspan>, <tref>, <altGlyph>, and <textPath>

Usage notes

Value auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | top | center | bottom
Default value auto
Animatable Yes
auto
The value is the dominant-baseline of the script to which the character belongs - i.e., use the dominant-baseline of the parent.
baseline
Uses the dominant baseline choice of the parent. Matches the box’s corresponding baseline to that of its parent.
before-edge
The alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent text content element.
text-top
Match the bottom of the box to the top of the parent’s content area.
text-before-edge

The alignment-point of the object being aligned is aligned with the "text-before-edge" baseline of the parent text content element.

Note: This keyword may be mapped to text-top.

middle
Aligns the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
central
Matches the box’s central baseline to the central baseline of its parent.
after-edge

The alignment-point of the object being aligned is aligned with the "after-edge" baseline of the parent text content element.

text-top
Matches the top of the box to the top of the parent’s content area.
text-after-edge

The alignment-point of the object being aligned is aligned with the "text-after-edge" baseline of the parent text content element.

Note: This keyword may be mapped to text-bottom.

ideographic
Matches the box’s ideographic character face under-side baseline to that of its parent.
alphabetic
Matches the box’s alphabetic baseline to that of its parent.
hanging

The alignment-point of the object being aligned is aligned with the "hanging" baseline of the parent text content element.

mathematical
Matches the box’s mathematical baseline to that of its parent.
top

Aligns the top of the aligned subtree with the top of the line box.

center
Aligns the center of the aligned subtree with the center of the line box.
bottom
Aligns the bottom of the aligned subtree with the bottom of the line box.

SVG 2 introduces some changes to the definition of this property. In particular: the values auto, before-edge, and after-edge have been removed. For backwards compatibility, text-before-edge may be mapped to text-top and text-after-edge to text-bottom. Neither text-before-edge nor text-after-edge should be used with the vertical-align property.

Example

<svg width="300" height="120" viewBox="0 0 300 120"
     xmlns="http://www.w3.org/2000/svg">

    <!-- Materialisation of anchors -->
    <path d="M60,10 L60,110 
             M30,10 L300,10 
             M30,65 L300,65 
             M30,110 L300,110
             " stroke="grey" />
    
    <!-- Anchors in action -->
    <text alignment-baseline="hanging"
          x="60" y="10">A hanging</text>

    <text alignment-baseline="middle"
          x="60" y="65">A middle</text>

    <text alignment-baseline="baseline"
          x="60" y="110">A baseline</text>

    <!-- Materialisation of anchors -->
    <circle cx="60" cy="10" r="3" fill="red" />
    <circle cx="60" cy="65" r="3" fill="red" />
    <circle cx="60" cy="110" r="3" fill="red" />

<style><![CDATA[
text{
    font: bold 36px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>

For object alignment in other elements (such as <text>), see dominant-baseline.

Specifications

Specification Status Comment
Unknown
The definition of 'alignment-baseline' in that specification.
Unknown No change
Scalable Vector Graphics (SVG) 2
The definition of 'alignment-baseline' in that specification.
Candidate Recommendation Refers to the definition in CSS Inline Layout and notes the changes to auto, before-edge, after-edge, text-before-edge, and text-after-edge
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'alignment-baseline' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
alignment-baselineChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown

See also