Attribut VERTICAL-ALIGN
Rôle
L’attribut vertical-align permet de gérer l’alignement vertical des éléments par rapport à la ligne de base.
Version : CSS1
Héritage (inherit) : non
Propriété Javascript : element.style.verticalAlign
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
b{
vertical-align: super;
}
i{
vertical-align: sub;
}
– Le code HTML
<p>Actuellement sur baseline <i>en dessous de baseline</i> sur la ligne de base <b>au dessus de baseline</b> retour sur baseline</p>
Résultat
Remarquez les différents alignements du texte par rapport à la ligne de base
Compatibilité
L’attribut vertical-align est pris en charge par tous les principaux navigateurs
Valeurs
L’utilisation de cet attribut peut faire augmenter la hauteur de ligne de l’élément parent
Les différentes valeurs de l’attribut vertical-align sont:
- baseline
- Alignement sur la ligne de base : valeur par défaut
Syntaxe :
vertical-align : baseline - lenght
- Définit un alignement en px, pt, cm, em. L’élément se situe au dessus de la ligne si la valeur est positive et en dessous si la valeur est négative
Syntaxe :
vertical-align : -10px - pourcentage – %
- Augmente ou abaisse un élément d’un pourcentage de la propriété « line-height ». Les valeurs négatives sont autorisées
Syntaxe :
vertical-align : 5% - sub
- Alignement en dessous de la ligne comme un indice
Syntaxe :
vertical-align : sub - super
- Alignement en dessus de la ligne comme un exposant
Syntaxe :
vertical-align : super - top
- La partie supérieure de l’élément est alignée tout en haut de l’interligne
Syntaxe :
vertical-align : top - bottom
- La partie inférieure de l’élément est alignée tout en bas de l’interligne
Syntaxe :
vertical-align : bottom - middle
- Le mileu de l’élément est alignée sur la ligne de base
Syntaxe :
vertical-align : middle - text-bottom
- La partie inférieure de l’élément est aligné avec le bas du texte présent sur la ligne de base
Syntaxe :
vertical-align : text-bottom - text-top
- La partie supérieure de l’élément est aligné avec le haut du texte présent sur la ligne de base
Syntaxe :
vertical-align : text-top - initial
- L’alignement est défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité, par exemple un élément peut ignorer l’alignement vertical imposée par une feuille de style qui cible cet élément.
Syntaxe :
vertical-align : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
vertical-align : inherit
A voir aussi
color– text-align– text-decoration– text-transform– text-indent– word-spacing– line-height– letter-spacing– white-space– direction– content
