Format de texte en CSS: Alignement de texte

Alignements simples

Avec le langage CSS nous pouvons faire tous les alignements que l'on connaît :
à gauche, centré, à droite et justifié.
On utilise la propriété text-align, et on indique l'alignement désiré :
☆ left : le texte sera aligné à gauche (par défaut).
☆ center : le texte sera centré.
☆ right : le texte sera aligné à droite.
☆ justify : le texte sera "justifié". Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont tout le temps justifiés.
Regardez les différents alignements sur cet exemple :


Code : CSS

Exemple :     📋 Copier le code

h1{
text-align: center; 
font-family: Arial, Verdana, serif; 
}
blockquote{
text-align: justify; 
.signature{
text-align: right; 
font-family: "Comic Sans MS", Georgia, "Times New Roman", serif; 
font-size: 80%;
}

Code HTML qui va avec

Exemple :     📋 Copier le code

<h1>La citation [du jour]</h1>
<p>Un jour, un grand sage a dit :</p>
<blockquote><p>Colère et intolérance sont les ennemis d'une bonne compréhension
</p>
<p class="signature">Signé : Gandhi</p></blockquote>

L'alignement ne fonctionne que sur des balises de type block (p, div, blockquote, h1, h2, ...) et non sur des balises inline(comme span, a, em, strong...)

L'indentation

L'indentation est la mise en retrait du texte. Elle permet de faire commencer un paragraphe un peu plus à droite. C'est un procédé que l'on retrouve dans la plupart des livres d'ailleurs.
On utilise la propriété text-indent. On indique quelle est la taille du retrait : soit en pixels, en centimètres, ou en millimètres.
Exemple:
Il dit que mes paragraphes soient mis en retrait de 30px

Code CSS:

Exemple :     📋 Copier le code

p{
text-indent: 30px; 
text-align: justify; 
font-size: large; 
}

Code HTML qui va avec

Exemple :     📋 Copier le code

<p>		
Avec le langage CSS nous pouvons faire tous les alignements que l'on connaît :<br>
à gauche, centré, à droite et justifié. <br>
On utilise la propriété text-align, et on indique l'alignement désiré : <br>
-	left : le texte sera aligné à gauche (par défaut). <br>
-	center : le texte sera centré. <br>
-	right : le texte sera aligné à droite. <br>
-	justify : le texte sera "justifié". 
</p>

Voir nos références pour plus de détail sur les propriétés de texte

chapitre précédent     chapitre suivant