Exercice 7.3 · 4 min · 0 tentative
Bien aligné
🎯 Objectif
Décider de quel côté le texte s'appuie, avec text-align.
📖 Exemple
Le menu du réfectoire : titre au milieu, prix rangé contre le bord droit :
<h2>Menu de jeudi</h2>
<p>Émincé de poulet, riz et petits pois</p>
<p class="prix">Menu complet : 9 francs</p>
h2 {
text-align: center;
}
.prix {
text-align: right;
}
Pourquoi ces deux valeurs ? text-align appuie le texte d'un côté de son bloc : center pour les phrases courtes — titres, bandeaux — et right pour ce qu'on range contre le bord — prix, dates, signatures. Le POINT devant .prix vise la classe posée dans le HTML.
⚠️ Et la quatrième valeur, justify ? Sur le web, évite-la. Le navigateur ne coupe pas les mots : pour étirer la ligne jusqu'aux deux bords, il élargit les espaces. Sur une colonne étroite, des « rivières » de blanc se creusent dans le texte et la lecture décroche — une gêne réelle pour les personnes dyslexiques. Un texte long reste appuyé à gauche.
📝 Consigne
Au blog de Lou, maintenant. Le HTML est fourni, la classe signature est déjà en place. Écris deux règles dans l'onglet CSS :
- Une règle sur le sélecteur
h1: le titre se place au centre - Une règle sur la classe
.signature: le texte part à droite, comme la signature d'une lettre
Résultat attendu
Le titre pile au milieu de la page, et la dernière ligne collée au bord droit — comme sur une lettre.
Ce qui est vérifié
- Écrire une règle d'alignement pour le titre
- Centrer le titre
- Écrire une règle d'alignement pour la signature
- Pousser la signature à droite
- Écrire un code HTML bien formé
- Respecter la structure de la page (doctype, head, body)