« Le langage CSS/Texte » : différence entre les versions
Contenu supprimé Contenu ajouté
Alignement : 1er jet |
|||
Ligne 279 :
==== <tt>text-align</tt> ====
La propriété <tt>text-align</tt> définit l'alignement du contenu d'un élément, typiquement le texte dans un paragraphe. Les valeurs possibles sont :
* ''left'', alignement à gauche
* ''right'', alignement à droite
* ''center'', alignement au centre
* ''justify'', alignement à droite et à gauche
Une figure valant mieux que de longues explications, l'effet de chaque valeur est le suivant :
{{Cadre}}
<table style="width: 30em;"><tr>
<td style="text-align: left; border: 1px solid #666;"> Texte aligné à gauche avec ''left''</td>
<td style="text-align: right; border: 1px solid #666;"> Texte aligné à droite avec ''right'' </td>
<td style="text-align: center; border: 1px solid #666;"> Texte aligné au centre avec ''center''</td>
<td style="text-align: justify; border: 1px solid #666;"> Texte justifié, aligné à droite et à gauche avec ''justify''</td>
</tr></table>
{{Fin}}
On constate aisément dans cet exemple que le texte justifié peut ne pas toujours être une bonne solution lorsque la largeur du contenant n'est pas suffisante. Des espacements exagérés entre mots peuvent en effet apparaître, c'est un problème connu avec ce type d'alignement du texte.
Remarque : Les spécifications du W3C indiquent que la propriété <tt>text-align</tt> ne concerne que les contenus de type ''inline'' (en ligne), c'est-à-dire destinés à être affichés les uns à la file des autres comme du texte, des liens, etc.
==== <tt>text-indent</tt> ====
La propriété <tt>text-indent</tt> définit le retrait de la première ligne de texte d'un élément. La valeur spécifiée est une [[#Distances_et_dimensions|valeur de distance]]. Par exemple le code suivant :
p {text-indent: 2em;}
donne ceci :
{{Cadre}}
<p style="text-indent: 2em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
{{Fin}}
=== Espacement des caractères, des mots et des lignes ===
| |||