Alignment-baseline - Propriété CSS

alignment-baseline

Résumé des caractéristiques de la propriété `alignment-baseline`

Description rapide

Définit comment un élément est aligné, dans le sens vertical, par rapport à son parent.

Statut

Standard

S'applique à

Éléments inline, élément dans une flex-box, éléments dans une grids, cellules de tableau, éléments SVG avec du texte.

Utilisable sur

HTML, SVG

Valeurs prédéfinies

Pourcentages

Ne s'appliquent pas.

Valeur initiale

baseline

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété alignment-baseline passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Mise en page en ligne

Références (W3C)

CSS Inline Layout Module Level 3

Statut du document: WD (document de travail)

Schéma syntaxique de `alignment-baseline`.

Schéma syntaxique de la propriété alignment-baseline
Cliquez sur le schéma pour plus de détails sur les valeurs

Description de `alignment-baseline`.

⚠

Cette propriété est encore insuffisamment prise en charge par les navigateurs sur les éléments HTML.

La propriété alignment-baseline définit quelle est la ligne de référence pour l'alignement vertical d'un élément, par rapport à la ligne de référence du parent. Cette propriété ne s'applique que aux élément du type inline

Un écart par rapport à cette ligne de référence peut être défini par baseline-shift.
Consultez également la page sur vertical-align qui est une propriété résumée.

Valeurs pour `alignment-baseline`.

Tous les exemples qui suivent sont réalisés en SVG. La propriété alignment-baseline est en effet mieux supportée par les navigateurs en SVG.

alignment-baseline: auto;

Cette valeur est équivalente à baseline.
alignment-baseline: baseline;

La ligne de référence de l'élément est la même que celle du parent.
alignment-baseline: text-top; alignment-baseline: text-bottom;

Ces deux valeurs, bien que figurant dans la spécification du WC, sont très mal reconnues par les navigateurs.

Aligne le texte sur une ligne correspondant à text-under et text-over.
alignment-baseline: middle;

L'alignement se fait sur le milieu des minuscules.
alignment-baseline: central;

L'alignement se fait sur le milieu des majuscules.
alignment-baseline: alphabetic;

Utilise la ligne de base des caractères latin, cyrillique, grec, etc. Est équivalent à normal dans la plupart des cas.
alignment-baseline: ideographic;

utilise le ligne de base des caractères idéographique.
alignment-baseline: mathematical;

Utilise la ligne de base autour de laquelle les caractères mathématiques sont conçus.
alignment-baseline: hanging;

Correspond à une ligne de base suspendue à partir de laquelle les caractères en tibétain et en écritures monocamérales avec un bord supérieur fort semblent "pendre".
alignment-baseline: text-before-edge; alignment-baseline: text-after-edge;

Valeurs globales
(communes à toutes les propriétés)


alignment-baseline: initial  (baseline)
alignment-baseline: inherit
alignment-baseline: revert
alignment-baseline: revertLayer
alignment-baseline: unset

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Manipulation de la propriété `alignment-baseline` par programme.

Modifier la valeur de `alignment-baseline` en Javascript.

En Javascript, voici comment modifier la valeur de alignment-baseline pour un élément el. La propriété est ajoutée ou modifiée directement sur l'élément lui-même, comme avec l'attribut style du HTML. Deux syntaxes sont possibles, avec le nom de la propriété écrit en kebab-case ou en camel-case.


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

Lire en Javascript la valeur de `alignment-baseline`.

La propriété doit avoir été affectée directement à l'élément lui-même par l'attribut style et non pas en passant par un sélecteur CSS. Ce code est donc le symétrique du précédent.


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

Lire la valeur calculée de `alignment-baseline` en Javascript.

La valeur calculée est celle qui résulte du mécanisme d'héritage en cascade. Ce sera soit la valeur appliquée à l'élément via un sélecteur, soit une valeur héritée, soit encore la valeur initiale de la propriété.


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

Modifier ou relire la valeur de la propriété `alignment-baseline` avec JQuery.

Dans ces deux exemples de code, le nom de la propriété peut être écrit indifféremment en camel-case ou en kebab-case.


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


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

Testez vous-même.

Les boutons ci-dessous appliquent une valeur à la propriété alignment-baseline et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Dans le cas de alignment-baseline ces deux valeurs seront identiques (sauf si votre navigateur ne reconnaît pas la propriété).