Editer un article - Informaticien.be

Editer un article

Titre
Mots Clés
Texte	Selon les [url=http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align]spécifications[/url] des CSS 2, vertical-align s'utilise dans les cas suivants : [quote]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.[/quote] Comme personne ne comprend ce charabia, je vais détailler. Vertical-align s'utilise dans 2 cas : [u]Aux différents éléments qui constituent une ligne de texte[/u] : [code]+-----+ \| 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).[/code] Vertical-align peut s'appliquer ici sur l'image pour positionner verticalement le [u]texte[/u] par rapport à celle-ci. Si j'applique à l'image la propriété : [fixed]vertical-align: middle;[/fixed] Le texte sera placé comme ceci : [code]+-----+ \| 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)[/code] 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 : [code]E = mc²[/code] Pour avoir le 2 en exposant on pourra écrire : [html]<p>E = mc<span class="sup">2</span></p>[/html] Avec comme propriétés pour la classe sup : [css].sup { font-size: smaller; vertical-align: top; }[/css] 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. [u]Aux cellules de tableaux[/u] 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. [b]En conclusion, vertical-align [u]ne permet pas[/u] : - De positionner verticalement un texte dans un bloc quelconque (DIV, P, etc...) - De positionner verticalement un bloc dans un autre bloc.[/b] -> 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é : [css]display: table-cell;[/css] 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
Fichier