Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Les propriétés CSS : text-align et vertical-align

Les propriétés CSS : text-align et vertical-align

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

css-1 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 :

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).

css-1 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 :

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.

par défaut right-bottom center-bottom left-top
center-center right-top center-top left-bottom

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.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau