Format de texte en CSS: Alignement de texte

La propriété CSS qui sert pour aligner du texte et contrôler ses propriétés pour les alignements : gauche, centré, droite et justifié est text-align

Somaire

Alignement

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

Sélectionner 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

Sélectionner 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:

Sélectionner le code
	
	p{
	   text-indent: 30px; 
	   text-align: justify; 
	   font-size: large; 
	}
	
 

Code HTML qui va avec

Sélectionner 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>
	
 
Par carabde 10 mars 2014

chapitre précédent chapitre suivant