CSS alignment-baseline Property

Description

The alignment-baseline property in CSS is part of the SVG and text layout specification, and it primarily affects how inline-level elements, particularly text and inline graphics, align vertically relative to the baseline of their parent container or to each other. This property is often used with vertical-align in HTML, but it provides finer control over SVG text and graphics alignment.

Essentially, it tells the rendering engine which baseline of the element should align with the baseline of the parent or surrounding elements. Think of it as choosing a “reference line” within an element that other elements will line up to.

How it Works

Every inline element or text character has multiple baseline types:

Alphabetic baseline: The line upon which most letters “sit” (e.g., a, e, x).
Ideographic baseline: Used for East Asian scripts; characters like Chinese or Japanese have a different visual baseline.
Hanging baseline: For scripts like Devanagari, where letters “hang” from a top line rather than sitting on a bottom line.
Mathematical baseline: Used for math symbols.
Central baseline: The vertical center of the element.
Text-bottom / text-top: Related to the overall bounding box of the text.

alignment-baseline allows you to specify which of these baselines should be considered when aligning the element relative to other elements.

Key Notes

alignment-baseline does not move the element itself. It only affects how its baseline is interpreted for alignment purposes.
Most commonly used in SVG, but it also works in HTML inline elements when paired with vertical-align.
Helps maintain typographic consistency across different scripts and inline elements of different heights.

Definition

Initial value: baseline
Applies to: Inline-Level elements
Inherited: no
Computed value: specified value
Animatable: yes
JavaScript syntax: object.style.alignmentBaseline

Syntax

alignment-baseline: baseline | text-bottom | alphabetic | ideographic | middle | central | mathematical | text-top

Values

baselineAligns the alignment-point of the element with the dominant-baseline of the parent.
text-bottomAligns the element to the very bottom of the parent's line box.
alphabeticStandard alignment for Latin/Cyrillic scripts (the bottom of letters like 'a' or 'b').
ideographicAligns to the bottom of the ideographic em box (used for Han scripts).
middleAligns the vertical midpoint of the element with the parent's baseline (often used for icons/text).
centralAligns the vertical center of the "em box" with the parent's baseline.
mathematicalAligns the element according to the mathematical baseline (center of symbols like $+$ or $-$).
text-topAligns the element to the very top of the parent's line box.

Example

HTML

<div class="wrap">

  <svg viewBox="0 0 880 160" xmlns="http://www.w3.org/2000/svg" class="demo" role="img" aria-label="alignment-baseline demo">

    <!-- horizontal reference line: y coordinate used for all text anchors -->

    <line x1="0" y1="80" x2="880" y2="80" class="guide" />



    <!-- samples: placed at the same y (80) but different alignment-baseline values set via CSS classes -->

    <text class="sample alphabetic" x="80" y="80">Ag</text>

    <text class="caption" x="80" y="140">alphabetic</text>



    <text class="sample ideographic" x="200" y="80">Ag</text>

    <text class="caption" x="200" y="140">ideographic</text>



    <text class="sample middle" x="320" y="80">Ag</text>

    <text class="caption" x="320" y="140">middle</text>



    <text class="sample central" x="440" y="80">Ag</text>

    <text class="caption" x="440" y="140">central</text>



    <text class="sample hanging" x="560" y="80">Ag</text>

    <text class="caption" x="560" y="140">hanging</text>



    <text class="sample baseline" x="680" y="80">Ag</text>

    <text class="caption" x="680" y="140">baseline</text>



    <text class="sample text-before-edge" x="800" y="80">Ag</text>

    <text class="caption" x="800" y="140">text-before-edge</text>

  </svg>

</div>

CSS

body { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; padding: 16px; background: #fbfbfc; }
.wrap { max-width: 920px; margin: 0 auto; }
svg.demo { width: 100%; height: auto; border: 1px solid #e6e7eb; background: #fff; display: block; }
.demo .guide { stroke: #e74c3c; stroke-width: 1; stroke-dasharray: 4 4; }
.demo .sample { font-size: 48px; fill: #111; text-anchor: middle; }
.demo .caption { font-size: 12px; fill: #666; text-anchor: middle; }

/* alignment-baseline values applied via CSS classes */
.alphabetic { alignment-baseline: alphabetic; }
.ideographic { alignment-baseline: ideographic; }
.middle { alignment-baseline: middle; }
.central { alignment-baseline: central; }
.hanging { alignment-baseline: hanging; }
.baseline { alignment-baseline: baseline; }
.text-before-edge { alignment-baseline: text-before-edge; }

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS alignment-baseline property. Hover over a browser icon to see the version that first introduced support for this CSS property.