Alignment-baseline - CSS Property

Syntax diagram of alignment-baseline.

Description of the alignment-baseline property.

The property alignment-baseline defines which is the reference line for the vertical alignment of an element, relative to the reference line of the parent. This property only applies to elements of the inline type

Also check the pages on the following properties :

baseline-shift

Set the offset, up or down, of the baseline of the text.

baseline-source

Defines whether the vertical alignment of an element must be done relative to its first or last line of text.

vertical-align

Short-hand property.

dominant-baseline

Specifies which baseline is used for vertical text alignment.

Values for alignment-baseline.

All the examples below are made in SVG. The property alignment-baseline is indeed better supported by browsers in SVG. Nevertheless Firefox   recognizes almost none of the values for this property (2026).

• alignment-baseline: auto;

  This value is equivalent to baseline.

  SVG
• alignment-baseline: baseline;

  The reference line of the element is the same as that of the parent.

  SVG
• alignment-baseline: text-top; ⚠ alignment-baseline: text-bottom; ⚠

  These two values, although appearing in the specification of the W3C, are very poorly recognized by browsers.

  Align the text on a line corresponding to text-under and text-over.

  SVG
• alignment-baseline: middle;

  Alignment is done on the middle of the lowercase letters.

  SVG
• alignment-baseline: central;

  The alignment is done on the middle of the capital letters.

  SVG
• alignment-baseline: alphabetic;

  Uses the baseline of Latin, Cyrillic, Greek characters, etc. Is equivalent to normal in most cases.

  SVG
• alignment-baseline: ideographic;

  Use the baseline of ideographic characters.

  SVG
• alignment-baseline: mathematical;

  Use the baseline around which mathematical characters are designed.

  SVG
• alignment-baseline: hanging;

  Corresponds to a hanging baseline from which characters in Tibetan and unicameral scripts with a strong upper edge appear to be suspended.

  SVG
• alignment-baseline: text-before-edge; alignment-baseline: text-after-edge;
  SVG
• alignment-baseline: initial; (baseline) alignment-baseline: inherit; alignment-baseline: revert; alignment-baseline: revertLayer; alignment-baseline: unset;

  See the following pages for more details: initial, inherit, revert, revert-layer, unset.

Manipulating the alignment-baseline property programmatically.

Modify the value of alignment-baseline in JavaScript.

In JavaScript, here is how to change the value of alignment-baseline for an el element. The property is added or modified directly on the element itself, just like with the HTML style attribute. Two syntaxes are possible, with the property name written in kebab-case or in camel-case.

let el = document.getElementById('id'); el.style['alignment-baseline'] = 'middle'; // or let el = document.getElementById('id'); el.style.alignmentBaseline = 'middle';

Read in Javascript the value of alignment-baseline.

The property must have been applied directly to the element itself via the style attribute and not through a CSS selector. This code is therefore the mirror image of the previous one.

let el = document.getElementById('id'); let value = el.style['alignment-baseline']; // or let el = document.getElementById('id'); let value = el.style.alignmentBaseline;

Read the computed value of alignment-baseline in JavaScript.

The computed value is the one that results from the cascading inheritance mechanism. It will be either the value applied to the element via its style attribute or a CSS selector, or an inherited value, or the initial value of the property (baseline in the case of alignment-baseline).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('alignment-baseline');

Modify or review the value of the property alignment-baseline with JQuery.

In these two code examples, the property name can be written interchangeably in camel-case or kebab-case.

let value = $('#id').css('alignment-baseline');

let value = $('#id').css('alignment-baseline');

Test it yourself.

The buttons below apply a value to the property alignment-baseline and then display either the value as applied, or the computed value. In the case of alignment-baseline, these two values will be identical (unless your browser does not recognize the value, in which case the computed value will be the initial value).

Simulator.

Browsers compatibility with alignment-baseline.

The property alignment-baseline is still poorly supported by browsers (2025), particularly by Firefox  .

1

alignment-baseline
property

2

dominant-baseline
property

Estimated overall support.

93%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the alignment-baseline property.

• CSS Inline Layout Module Level 3

  This module covers everything related to text block alignment, both within grid-based containers and for inline blocks (content within a flexbox or an inline-block). The vertical alignment properties, in particular, have been significantly enhanced.

  Regarding alignment-baseline. First definition of the alignment-baseline property.
  

  December 18, 2014

  Working Draft.

  

  

  

See also, in the same standardization module as alignment-baseline.

Properties:

Alignment-baseline

Defines how an element is aligned vertically relative to its parent.

⚠

baseline-shift

Set the offset, up or down, of the baseline of the text.

baseline-source

Defines whether the vertical alignment of an element must be done relative to its first or last line of text.

dominant-baseline

Specifies which baseline is used for vertical text alignment.

⚠

initial-letter

Sets a drop cap: character size, how many lines it covers, etc.

⚠

initial-letter-wrap

Defines how the text should wrap around drop caps, specifically following as closely as possible the shape of the drop cap character or not.

line-height

Sets the height of lines of text.

⚠

text-box

Allows the removal of spaces located before and/or after the lines of text.

⚠

text-box-edge

Sets the metric for CJK texts.

⚠

text-box-trim

Specifies how reducing the dimensions of a text box should be done to conform to text-box-edge (CJK languages).

vertical-align