Se connecter
Inscription
Mot de passe perdu
zion - De la bonne utilisation de vertical-alignCette 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).
| 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)
| 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 :
Avec comme propriétés pour la classe sup :
- .sup {
- font-size: smaller;
- vertical-align: top;
- }
Bon, bien sûr on peut utiliser <sup> ... </sup> 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é :
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
Jeux Vidéos
Android
Droit
