Valeurs
Pour chacune des valeurs suivantes, nous l’appliquerons à une image en ligne à l’intérieur d’une boîte de ligne d’un élément de liste. La zone de ligne dans chacune des images a une bordure grise en pointillé. La ligne utilisée pour aligner les images pour chaque valeur est rouge.
baseline C’est la valeur par défaut. Il aligne la ligne de base de l’élément avec la ligne de base de la boîte de ligne. Si l’élément n’a pas de ligne de base, il aligne le bord de la marge inférieure avec la ligne de base de la ligne.
middle Aligne le milieu vertical de l’élément avec la ligne de base de la ligne plus la moitié de la hauteur x de la ligne (déterminée par le font).
C’est l’une des valeurs les plus couramment utilisées pour vertical-align propriété, et est généralement utilisé pour aligner les icônes et les marqueurs de liste avec le texte en ligne.
sub Abaisse la ligne de base de l’élément à la bonne position pour les indices sur la ligne. (Cette valeur n’a aucun effet sur la taille de la police du texte de l’élément.)
super Élève la ligne de base de l’élément à la bonne position pour les exposants sur la ligne. (Cette valeur n’a aucun effet sur la taille de la police du texte de l’élément.)
text-top Aligne le haut de l’élément avec le haut de la zone de contenu de la ligne. La hauteur de la zone de contenu est juste assez élevée pour les ascendeurs et les descendants maximum de toutes les polices de la ligne, et la ligne d’alignement est le haut de cette hauteur. Notez que la hauteur peut être supérieure à toutes les tailles de police impliquées, en fonction de l’alignement de base des polices.
text-bottom Aligne le bas de l’élément avec le bas de la zone de contenu de la ligne. La hauteur de la zone de contenu est juste assez élevée pour les descendants et ascendants maximum de toutes les polices de la ligne, et la ligne d’alignement est le bas de cette hauteur. Notez que la hauteur peut être plus grande que l’une des tailles de police impliquées, en fonction de l’alignement de base des polices.
top Aligne le haut de l’élément avec le haut de la ligne entière. Cela signifie que s’il y a d’autres éléments sur la ligne, chacun avec des hauteurs différentes, comme plusieurs images, par exemple, le haut de la ligne sera aussi haut que la plus haute des deux images.
Si la ligne a un line-height qui est plus haut que le contenu le plus élevé sur la ligne, le haut de la boîte de ligne sera alors déterminé par cette hauteur.
bottom
line-height n’est spécifié, le bas de la zone de ligne est déterminé par les descendants les plus bas de la police dans cet exemple, le résultat est donc similaire à celui obtenu en utilisant text-bottom. Aligne l’élément au bas de la ligne entière.
Si la ligne a un line-height qui est inférieur au contenu le plus bas de la ligne, le bas de la boîte de ligne sera alors déterminé par cette hauteur.
line-height spécifié qui étire le bas de la ligne vers le bas, et l’image est alignée avec ce bas.
< pourcentage > Élever l’élément au-dessus de la ligne de base (si la valeur en pourcentage est positive), ou abaisser l’élément ci-dessous la ligne de base (si la valeur en pourcentage est négative) par le montant spécifié. Le montant spécifié est un pourcentage de la valeur deline-height. La valeur0%a la même signification quebaseline.
line-height spécifié est de 100 pixels, l’image est donc soulevée de 50 pixels au-dessus de la ligne de base. < length > Soulevez l’élément au-dessus de la ligne de base (si la valeur de longueur est positive) ou abaissez l’élément en dessous de la ligne de base (si la valeur de longueur est négative) par le montant spécifié. Une valeur ‘0’ signifie la même chose quebaseline.
Remarques
Les valeurs top, bottom et middle se comportent comme prévu lorsqu’ils sont appliqués à des éléments de cellule de tableau. Toutefois, d’autres valeurs peuvent avoir un comportement inattendu dans certains navigateurs. C’est Chris Coyier qui le dit le mieux:
Lorsque vous utilisez l’alignement vertical sur les cellules d’un tableau, il est préférable de s’en tenir au haut, au bas et au milieu. Aucune des autres valeurs n’a de toute façon beaucoup de sens et donne des résultats imprévisibles entre les navigateurs. Par exemple, définir une cellule sur text-bottom aligne le texte vers le bas dans IE 6 et vers le haut dans Safari 4. Le définir sur sous entraîne l’alignement du milieu dans IE 6 et du haut dans Safari 4.
L’alignement vertical par défaut des cellules du tableau (<td>) est middle. Cependant, l’alignement vertical par défaut pour un élément de niveau bloc qui a display: table-cell est toujours top, qui est l’alignement par défaut pour le niveau bloc conteneurs en général. Voir la section démo ci-dessous pour un exemple en direct.
