Alignement des textes
Centrer, aligner et justifier des textes en CSS
L'alignement des textes en CSS est défini par la propriété 'text-align'.Cette propriété peut prendre différentes valeurs selon l'alignement souhaité : La valeur left correspond à l'alignement à gauche et c'est la valeur par défaut.
L'autre valeur right correspond à l'alignement à droite. Avec la valeur center, le texte sera centré. La valeur justify permet de justifier le texte. La justification consiste à faire en sorte que le texte occupe toute la largeur possible, et qu'il soit aligné aussi bien à droite qu'à gauche. Pour retenir facilement, voici en résumé les différentes valeurs et leur signification:
- left : aligner à gauche
- right : aligner à droite
- center : centrer
- justify : justifier
Voyons ces différents alignements dans cet exemple.
CSS :
h1
{
text-align: center; /* centré */
}
.justifie
{
text-align: justify; /* justifiée */
}
.gauche
{
text-align: right; /*aligné à gauche*/
}
Code XHTML :
<h1>Paragraphe sans justification</h1> <p>La valeur left correspond à l'alignement à gauche et c'est la valeur par défaut. L'autre valeur right correspond à l'alignement à droite. Avec la valeur center, le texte sera centré. La valeur justify permet de justifier le texte. La justification consiste à faire en sorte que le texte occupe toute la largeur possible. </p> <h1>Paragraphe avec justification</h1> <p class="justifie">La valeur left correspond à l'alignement à gauche et c'est la valeur par défaut. L'autre valeur right correspond à l'alignement à droite. Avec la valeur center, le texte sera centré. La valeur justify permet de justifier le texte. La justification consiste à faire en sorte que le texte occupe toute la largeur possible. </p> <p class="gauche"> <a href="exemple.html">lire la suite...</a> </p>
Il n'est pas possible de modifier l'alignement d'un texte d'une balise in line telles qu'em, strong, etc. L'alignement ne concerne que les types block. Cela n'a rien de vraiment étrange, c'est juste une question de logique. Modifier l'alignement d'un mot qui se trouve au milieu d'un paragraphe n'a aucun sens logique.
Alignement vertical
Comme son nom l'indique, la propriété vertical-align permet de définir le positionnement vertical d'un texte par rapport à un élément de type in-line. En général, elle ne bénéficie pas des règles d'héritage. On trouve l'intérêt de cette propriété particulièrement dans la manipulation des cellules d'un tableau. Cependant, la propriété pose un problème sur certains navigateurs comme IE6 par exemple. Différentes valeurs possibles sont proposées dans la liste suivante :
- super : place le texte en dessus de l'élément parent comme un exposant
- top : Le sommet du texte est aligné sur celui du plus haut de l'élément de référence
- middle : Le milieu du texte s'aligne au milieux de l'élément parent
- baseline : C'est la valeur par défaut et elle indique la position normale. Elle respecte l'alignement à gauche et place le texte au même niveau que l'élément in-line de référence
- bottom : La partie inférieure du texte est alignée sur celle du plus bas de l'élément de référence
- sub : Le texte est placé en dessous de l'élément parent comme un indice
Et il y a aussi deux autres valeurs : text-top et text-bottom. Les deux sont similaires respectivement à top et bottom et ils donnent des résultats très fins.
Code CSS :
p
{
font-size:36px;
text-decoration:underline; /* souligné*/
}
.petit
{
font-size:9px;
}
.exposant
{
vertical-align:super;
}
.haut
{
vertical-align:top;
}
.milieu
{
vertical-align:middle;
}
.normal
{
vertical-align:baseline;
}
.bas
{
vertical-align:bottom;
}
.indice
{
vertical-align:sub;
}
Code XHTML :
<p>REFERENCE <span class="petit exposant "> super</span></p> <p>REFERENCE <span class="petit haut "> top</span></p> <p> REFERENCE <span class="petit milieu"> middle</span></p> <p> REFERENCE <span class="petit normal"> baseline</span></p> <p> REFERENCE <span class="petit bas"> bottom</span></p> <p> REFERENCE <span class="petit indice"> sub</span></p>
Dans notre exemple, on a mis un texte de 36px comme référence, et un texte en plus petit pour montrer chaque position. Les propriétés définissent alors selon leur valeur chacune des positions du texte en petite taille par rapport au grand.
L'indentation
L'indentation est l'équivalent du retrait dans les traitements de texte. Il s'agit de mettre le début d'un paragraphe un peu plus à droite par rapport à la normale. La propriété text-indent est utilisée pour cela. On attribue comme valeur à cette propriété la taille du retrait. La taille peut être indiquée en px, etc.
Code CSS :
.indentation
{
text-indent: 40px; /* Les paragraphes commenceront 40 pixels de la droite */
font-size:12px;
}
<p>Paragraphe sans indentation</p>
<p class="indentation">Paragraphe avec indentation. </p>
