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

search |

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



Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Convertir un texte JSON à un objet JavaScript

JSON comment convertir un texte JSON à un objet JavaScript

border-left-color

Définit la couleur de la bordure gauche

Appliquer un style à des balises en css

Apprendre le CSS rapidement et facilement en quelques leçons avec des exemples clairs....



Rentabilisez efficacement votre site

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