oujood.com

Format de texte en CSS: Alignement de texte

CSS text-align pour aligner le texte des pages de site web et contrôler les alignements : gauche, centré, droite et justifié
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

chercher |

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>
	
 

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


Par carabde 10 mars 2014

chapitre précédent     chapitre suivant



1tpe

Regarder aussi nos cours :

fonction ord, ord

Retourne le code ASCII d'un caractère

Affichage fichiers XML

Affichage fichiers XML

fonction crypt

Hachage sens unique (indéchiffrable)


Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci