Médiaforma

All posts tagged align

L’attribut HTML align permet d’aligner horizontalement les données dans les cellules. Il peut être initialisé avec les valeurs suivantes :

  • left : alignement à gauche ;
  • center : alignement centré ;
  • right : alignement à droite.

L’attribut HTML valign permet d’aligner verticalement les données dans les cellules. Il peut être initialisé avec les valeurs suivantes :

  • top : alignement dans la partie supérieure de la cellule ;
  • middle : alignement dans la partie centrale de la cellule ;
  • bottom : alignement dans la partie inférieure de la cellule.

Nous allons utiliser ces six valeurs sur les six cellules d’un tableau dont les cellules ont une largeur fixée à 200 pixels.

La première cellule est alignée à gauche, la deuxième est centrée et la troisième alignée à droite.

En insérant une balise <p> dans la quatrième cellule, elle contient deux lignes. L’attribut valign aligne la quatrième cellule dans la partie supérieure, la cinquième dans la partie centrale et la sixième dans la partie inférieure.


L’attribut align d’une balise <img> permet de l’aligner par rapport au texte qui l’entoure.

L’image peut être alignée :

  • à gauche avec un attribut align initialisé à left ;
  • à droite avec un attribut align initialisé à right.

En utilisant d’autres valeurs pour l’attribut align, le texte peut s’aligner verticalement sur l’image. Lorsqu’align vaut :

  • top, la partie supérieure du texte s’aligne avec la partie supérieure de l’image :
  • middle, la partie inférieure de l’image s’aligne avec le milieu de l’image ;
  • bottom, la partie inférieure du texte s’aligne avec la partie inférieure de l’image.

Voici le résultat de ce code dans Internet Explorer :


Les paragraphes (entendez par là les blocs de texte encadrés par des balises <p> et </p>) sont par défaut alignés à gauche. Le texte est donc ancré sur la partie gauche de la fenêtre du navigateur. Si vous redimensionnez la fenêtre, le texte reste ancré à gauche.

Dans cette rubrique, vous allez apprendre à changer l’alignement des paragraphes. Pour cela, vous allez ajouter l’attribut align dans la balise <p> en précisant le type d’alignement souhaité :

  • left pour un alignement à gauche ;
  • right pour un alignement à droite ;
  • center pour un centrage du texte.

Remarquez la syntaxe utilisée dans la balise <p> :

  • un espace sépare la lettre p du mot align ;
  • le mot align est suivi d’un espace ;
  • le type de l’alignement est entouré de guillemets.

Sauvegardez le document avec Ctrl+S et affichez-le dans Internet Explorer avec Alt+Ctrl+Maj+I. Voici le résultat :

Si vous modifiez la largeur de la fenêtre, le texte aligné à gauche ne change pas de position. Par contre, le texte aligné à droite suit le bord droit de la fenêtre et le texte centré se déplace pour se trouver au centre de la fenêtre.