On apprendra dans le présent chapitre les propriétés CSS text-align et vertical-align. Quoi uniquement deux Du calme les gars ! Ce n'est pas la quantité qui prime, mais plutôt la qualité. Je préfère moi apprendre délicatement une ou deux propriétés au lieu d'étudier en gros une dizaine

• text-align (alignement horizontal)

• vertical-align (alignement vertical)

• Les propriétés CSS vertical-align et text-align avec les tableaux

text-align (alignement horizontal)

On a marre de voir le texte des paragraphes et des titres justifié à gauche. Que faire pour le centrer ou pour l'aligner à droite ? Grâce à la propriété CSS text-align, on peut personnaliser l'alignement du texte. En total vous aurez le choix entre quatre mentions comme dans le Word, votre logiciel de traitement de texte. Les mentions possibles sont :

• left : texte aligné sur la gauche (comportement par défaut) ;
• right : texte aligné sur la droite. très utile si on veut insérer par exemple une signature, une remarque ou une adresse.
• center : texte centré ;
• justify : texte justifié c'est-à-dire qu'il occupe la largeur maximale pour ne pas laisser des espaces en fin de lignes. D'ailleurs c'est l'alignement adopté par la majorité des journaux, car les articles sont écrits sous forme de colonnes. Alors il s'avère très utile de justifier les textes pour que les colonnes aient la même largeur et puis pour améliorer la présentation et la lisibilité.

Notez que L'algorithme d'alignement appliqué dépend de l'agent utilisateur (navigateur) et de la langue. En plus l'alignement est appliqué par rapport à la largeur de l'élément qui a reçu la propriété CSS text-align et non au canevas (zone d'affichage).

La propriété CSS text-align n'est pas valable pour les balises inline (strong, em, a, span, img etc.), car vous ne pouvez pas aligner les éléments que vous insérez dans les paragraphes (mots, phrase, passage texte, image, bouton, zone de texte), ça serait impossible d'aligner un élément qui est suivi et précédé par du texte. Voici quelques exemples :

p {
text-align: justify; /* paragraphes justifiés */ 
}
h1 {
text-align: right; /* titres N° 1 alignés à droite */ 
}
.centrer  {
text-align: center; /* une classe qui permet de centrer */ 
}

Notez qu'il y a cependant certains éléments de niveau en-ligne remplacés qui peuvent supporter la propriété CSS text-align. Ces éléments correspondent à certains contrôles de formulaires : champ de texte multiligne et uniligne (<textarea>, <inupt type="text">), le champ d'uploade (<input type="file">) et enfin le champ de password (<input type="password">).

Il ne faut pas interpréter de façon erronée le fonctionnement de la propriété CSS text-align. En fait il ne centre pas l'élément bloc (ou inline remplacé) qui a reçu la propriété par rapport à son conteneur (élément parent). Mais plutôt les éléments enfants (balises en-ligne et texte) contenus dans le bloc en question. Pour centrer un bloc horizontalement par rapport à son conteneur, il faut recourir à la propriété CSS margin (centrage horizontal).

La propriété CSS text-align, étant héritable. Vous pouvez spécifier un alignement à un conteneur (body, div etc.) pour que tous les éléments enfants qui y sont imbriqués aient le même alignement.

Il ne faut pas confondre l'alignement (justification) avec le sens d'écriture (propriété CSS direction).

vertical-align (alignement vertical)

Cette propriété permet de spécifier l'alignement vertical d'un élément en-ligne par rapport à la ligne de base. Les valeurs possibles sont :

• baseline : aligne la ligne de base ou le bas de l'élément au même niveau que la ligne du texte (valeur par défaut) ;
• top : aligne le sommet de l'élément avec celui de l'élément le plus haut dans la ligne que ce soit du texte ou image etc. (#bottom) ;
• bottom : aligne le bas de l'élément avec celui de l'élément le plus bas dans la ligne (#top) ;
• middle : aligne le milieu vertical d'un élément en-ligne remplacé avec la ligne de base majorée de la moitié de sa hauteur. Cette constante s'avère très utile pour centrer verticalement les émoticônes qui se placent dans le texte. D'ailleurs moi j'ai créé une classe .smilies pour cette raison ;
• super : place l'élément en exposant sans pour autant diminuer sa taille, contrairement à la balise <sup> ;
• sub : place l'élément en indice sans pour autant diminuer sa taille contrairement à la balise <sub> ;
• text-top : aligne le sommet d'un élément avec celui du texte (#text-bottom) ;
• text-bottom : aligne le bas d'un élément avec celui du texte (#text-top).

Voici la sortie visuelle de chaque constante. Les éléments concernés par la propriété CSS vertical-align sont : l'émoticône le mot "Bla Bla" et l'icône de Firefox.

La constante baseline

Notez que l'émoticône et le texte "Bla Bla" sont ajustés au même niveau que la ligne de base.

La constante top

Notez que :
le sommet de l'émoticône et du texte "Bla Bla" sont ajustés au même niveau que celui de Texte

La constante bottom

Notez que le bas de l'émoticône et du texte "Bla Bla" sont ajustés au même niveau que celui de l'icône de Firefox (elle-même centrée verticalement à l'aide de la constante middle) :
Texte simple Texte simple "Bla Bla" icône Firefox

La constante middle

Notez bien que les éléments en-ligne remplacés suivants : sont centrés verticalement.

La constante super et sub

Texte en indice et texte en exposant avec la propriété CSS vartical-align. Texte en _indice et texte en ^exposant avec les balises sup et sub.

La constante text-top

Notez que le sommet de l'image est aligné au même niveau que celui de la ligne de base.

La constante text-bottom

Notez que le bas de l'image est ajusté au même niveau que le bas du texte.

Vous pouvez aussi utiliser les unités cm, em, in, mm, pc, px et pt. Dans ce cas : une valeur nulle correspond à la constante baseline ; une valeur positive permet de positionner l'élément à la distance précisée au-dessus de la ligne de base ; une valeur négative permet de positionner l'élément à la distance précisée au-dessous de la ligne de base.

Une valeur relative en pourcentage positive ou négative peut aussi être spécifiée. Cette dernière est calculée par rapport à la valeur de la propriété CSS line-height de l'élément en question.

Les propriétés CSS vertical-align et text-align avec les tableaux

Par défaut le contenu des cellules de tableaux est justifié à gauche et centré verticalement. Pour modifier ce réglage par défaut vous pouvez tirer profit des deux propriétés CSS vertical-align et text-align pour personnaliser les alignements vertical et horizontal.

Pour appliquer un certain alignement à toute une ligne de tableau, spécifiez les deux propriétés CSS vertical-align et text-align à la balise <tr>. Si vous voulez uniquement personnaliser l'alignement d'une seule case, cibler la balise <td> par les deux propriétés vertical-align et text-align.

A présent tourner la page vers le chapitre suivant : propriétés CSS de formatage et de mise en page du texte.