Propriété "vertical-align" verticalement

 

Cette propriété accompagnée de diverses valeurs permet de définir le positionnement vertical d'un texte par rapport à un élément de type en-ligne (en ligne par opposition au type en bloc). Son application se retrouvera pour les cellules de tableaux.

Cette propriété "vertical-align" ne bénéficie pas des règles d'héritage. Certains navigateurs ne respectent ces instructions, que partiellement ou de manière différente.

 

W3C dixit : Cette propriété agit sur le positionnement vertical à l'intérieur de la boîte de ligne des boîtes générées par un élément de type en-ligne. Les règles suivantes n'ont de sens que par rapport à un élément parent de type en-ligne, ou de type bloc si celui-ci génère des boîtes en-ligne anonymes ; elles sont inopérantes autrement.

henry dixit : Pour cette propriété, très humblement, si elle est intéressante c'est surtout pour les cellules de tableaux comme vous le verrez par la suite. Je vous propose ci-après les codes officiellement retenus par le W3C, et ensuite les exemples qui par contre ne fonctionnent pas tous correctement chez moi avec IE 6 sur PC.

 

Valeurs supportées par cette propriété

baseline = valeur par défaut, l'alignement à gauche {vertical-align: left ; }

bottom = aligne la partie inférieure du textesur celle du plus bas élément de la ligne {vertical-align: left ; }

* Text-bottom = aligne la partie inférieure du texte ("pour exemple") sur celle de l'élément parent

top = aligne le sommet du texte sur celui du plus haut élément de la ligne {vertical-align: top ; }

* Text-top = aligne la partie supérieure du texte ("pour exemple") sur celle de l'élément parent

sub = place le texte en dessous de l'élément parent : en indice (comme tag "sub" en HTML) {vertical-align:sub ; }

super = place le texte en dessus de l'élément parent : en exposant (comme tag "sup" en HTML) {vertical-align:super ; }

middle = aligne le milieu de l'élément sur celui de l'élément parent {vertical-align: middle ; }

Valeurs en numérique et pourcentage(valeur négative admise en pourcentage)

* Résultats obtenus un peu subtils à vérifier par rapport à Top et Bottom.

 

Exemple du code de chaque exemple dans BODY

<p><font size="6">1- Exemple réalisé</font><span style="vertical-align: top ; "> pour exemple</span></p>

 

text-bottom

1- pppEEEEEEEEpour exemple

Exemple 1 - "vertical-align: text-bottom ;" qui aligne la partie inférieure du texte (pour exemple) sur celle de l'élément parent mais au niveau du bas des caractères sans tenir compte de leur jambage comme la lettre p ( le texte du parent est en font-size 6, pour mieux visualiser les différences d'alignement, et le soulignement ajouté avec les tags <u>...</u> pour percevoir la nuance de hauteur parfois minime qui existe).

 

 

bottom

2- pppEEEEEEEEpour exemple

Exemple 2 - "vertical-align: bottom ;" qui aligne la partie inférieure du texte (pour exemple) sur celle de l'élément parent mais cette fois au niveau du bas des jambages des caractères comme la lettre p.

 

 

Un plus !

2 bis - il y a problème parfois pour la présentation, et il convient de remarquer que si le texte est trop long, il effectue bien un saut de ligne en fin de ligne mais en dessous de l'élément parent. Je vous propose au dernier exemple une solution pour aligner la totalité du texte à la droite de l'élément parent.

 

 

text-top

3- pppEEEEEEEEpour exemple

Exemple 3 - "vertical-align: text-top ;" qui aligne la partie inférieure du texte (pour exemple) sur celle de l'élément parent.

 

top

4- pppEEEEEEEEpour exemple

Exemple 4- "vertical-align: top ;" qui aligne la partie supérieure du texte (pour exemple) sur celle de l'élément parent EEEEEEEE.

 

 

middle

5- EEEEEEEEavec un sourire

Exemple 5 - "vertical-align: middle ;" qui aligne le milieu du texte (avec un sourire) sur le milieu de l'élément parent E. Mais réalisé ici avec un pourcentage <span style="vertical-align: 50% ; "> et plus bas vous retrouvez l'exemple avec "middle" mais sur une image.

 

 

middle (bis)

5 bis - avec la sous-classe .middle {vertical-align: middle ; } : et c'est le bas de la petite image qui est placée sur le milieu de l'élément parent représenté par la grande image.(et idem pour le texte)

 

 

sub

6- pppEEEEEEEE "en indice"

Exemple 6 - "vertical-align: sub ;" qui aligne la partie inférieure du texte ("en indice") sur celle de l'élément parent.

 

 

super

7- pppEEEEEEEE "en exposant"

Exemple 7 - "vertical-align: super ;" qui aligne la partie inférieure du texte ("en exposant") sur celle de l'élément parent.

 

 

superen exposant avec corps de taille variable

8- Exemple réalisé "en exposant"

Exemple 8 - "vertical-align: super ;" qui reprend l'exemple 7, en ajustant cette fois la taille des caractères en utilisant la déclaration : "vertical-align:super ; font-size: 80% ; ". Vous pouvez aussi régler la différence d'écartement vertical en remplaçant le terme "super" par "+20px" par exemple : "vertical-align: +20px ; font-size:80% ; ". Essayez pour voir et idem avec "super" et -5px.

 

 

Problème !

Problème posé Voici un texte de deux lignes qui avec "vertical-align" voit la deuxième ligne retourner en dessous de l'élément servant de parent. C'est pas forcément l'idéal et il convient en conséquence de chercher mieux.

Il existe une solution en CSS, à consulter page suivante (retour assuré)