HTML/XHTML/CSS - De la bonne utilisation de vertical-align

Catégories - Programmation - HTML/XHTML/CSS

zion - De la bonne utilisation de vertical-align

Selon les spécifications des CSS 2, vertical-align s'utilise dans les cas suivants :

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.

Comme personne ne comprend ce charabia, je vais détailler.

Vertical-align s'utilise dans 2 cas :

Aux différents éléments qui constituent une ligne de texte :

+-----+
| o |
| -|- |
| / \ |
+-----+ Ceci est une ligne de texte avec une grosse image au début. Par
défaut, le texte lui même et les images (qui sont des éléments "en-ligne")
sont alignés en bas sur la ligne de base du texte (vertical-align: baseline).

Vertical-align peut s'appliquer ici sur l'image pour positionner verticalement le texte par rapport à celle-ci. Si j'applique à l'image la propriété :

vertical-align: middle;

Le texte sera placé comme ceci :

+-----+
| o |
| -|- |Ceci est une ligne de texte avec une grosse image au début. Avec
| / \ |
+-----+
vertical-align: middle; le texte se place au milieu par rapport à l'image
(uniquement sur la ligne où se trouve l'image)

Bien sûr on peut appliquer vertical-align sur autre chose que des images. N'importe quel élément en-ligne est concerné : SPAN, B, I, INPUT, etc...

Une application concrète de ceci est de créer des exposants et des indices. Par exemple si on prend la célèbre formule :

E = mc²

Pour avoir le 2 en exposant on pourra écrire :

Code:

E = mc2

Avec comme propriétés pour la classe sup :

Code:

.sup {
font-size: smaller;
vertical-align: top;
}

Bon, bien sûr on peut utiliser ... pour produire un résultat similaire, mais c'est pour l'exemple.

Voyons maintenant la deuxième utilisation de vertical-align.

Aux cellules de tableaux

Ce sont en effets des blocs qui "génèrent des boîtes en-ligne anonymes". Ils sont donc concernés par vertical-align d'après la spécification.

Ici l'utilisation de vertical-align est évidente. Elle est similaire à l'ancien attribut "valign" et permet de positionner verticalement un texte à l'intérieur d'une cellule si celle-ci est plus haute que l'ensemble du texte.

En conclusion, vertical-align ne permet pas :

- De positionner verticalement un texte dans un bloc quelconque (DIV, P, etc...)
- De positionner verticalement un bloc dans un autre bloc.

-> Si on souhaite positionner du texte verticalement dans un bloc :
- soit on connait la hauteur de l'ensemble du texte et alors on peut utiliser le positionnement absolu ou relatif (ce qui revient à positionner un bloc dans un autre bloc);
- soit on ne connait pas la hauteur de l'ensemble du texte, alors on peut donner au bloc la propriété :

Code:

display: table-cell;

de manière à ce que le bloc se comporte comme une cellule de tableau et que vertical-align soit effectif dessus.

-> Si on souhaite positionner verticalement un bloc dans un autre bloc :
- soit on connait la hauteur des blocs et on peut utiliser le positionnement absolu ou relatif ;
- soit on ne connait pas la hauteur du bloc intérieur et alors il n'y a pas de solution simple avec les CSS (voire pas de solution du tout :()

Voilà, je n'ai pas fait le tour de la question : vertical-align peut prendre plein de valeurs différentes et je vous invite à jouer un peu avec pour voir les différences.

Merci à gm_superstar pour cet article

Poster un commentaire

Utilisateur	(Inscription)
Mot de passe