Tests visuels sur : vertical-align et ses valeurs.

Testons les valeurs : baseline , sub , super ,top ,text-top ,middle ,bottom ,length et percent et visualisons leurs effets .

Pour ce test , nous nous servirons :

  1. un fond blanc
  2. un paragraphe avec une bordure grise et un fond bleu claire
  3. d'une image avec une bordure css verte
  4. d'un texte rouge surligné et souligné en reprenant le nom de la valeur appliquée a l'image .

La position de l'image dans le pargraphe et son alignement sur le texte sera clairement visible .

Test visuel

Il y a peu a ajouter , si ce n'est le lien vers la doc officielle :'vertical-align' .

baseline

sub

super

top

text-top

middle

bottom

text-bottom

length : 1.3em

Percent : -250%

Ces valeurs s'appliquent aux elements de type inline , inline-block , cellule de tableau ou declarés comme tels par le biais des styles

Les deux dernieres valeurs testées permettent de personaliser l'alignement vertical avec des valeurs arbitraires en pourcentage ,cm , px , ... Vous n'avez plus aucune excuse pour ne pas reussir vos alignements !

Ecrire un commentaire




Quelle est la troisième lettre du mot qjztt ?