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 <strong>text-align</strong>

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

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


Par carabde 10 mars 2014

chapitre précédent     chapitre suivant





Voir aussi nos tutoriel :

fonction md5, md5

Calcule le md5 d'une chaîne

fonction gmmktime

Retourne le timestamp UNIX d'une date GMT

Balise tbody

Groupes du contenu du corps d'un tableau