text-align
Aligne le texte horizontalement : à gauche, à droite, au centre ou sur les deux bords.
- Valeur initiale
start- Héritée
- Oui
- Animable
- non
- S’applique à
- conteneurs de bloc
- JavaScript
element.style.textAlign = "center"
Exemple
#.cta {
text-align: center;
}<section class="cta stage" style="text-align: center;">
<h2 style="margin: 0">Prêt pour votre première leçon ?</h2>
<p style="margin: 6px 0 12px">Commencez gratuitement, sans carte bancaire.</p>
<button type="button">Commencer maintenant</button>
</section>Définition et utilisation
#La propriété text-align définit l’alignement horizontal du contenu en ligne dans un bloc : texte, liens, images en ligne et éléments inline-block. Elle ne déplace pas le bloc lui-même, seulement ce qu’il contient, ligne par ligne.
Les valeurs start et end dépendent du sens d’écriture : en français, start correspond au côté gauche, et en arabe au côté droit. La mise en page s’adapte ainsi toute seule à la langue. justify étire les lignes pour qu’elles touchent les deux bords.
Pour centrer un bloc (et non le texte qu’il contient), on utilise des marges auto, ou Flexbox et Grid.
Syntaxe
#text-align: start | end | left | right | center | justify;Valeurs
#Valeurs en pratique
#start
.demo { text-align: start; }center
.demo { text-align: center; }end
.demo { text-align: end; }justify
.demo { text-align: justify; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Alignez les longs paragraphes à gauche. Un texte centré ou justifié se lit plus difficilement, et la justification crée des trous entre les mots.
- Utilisez
startetendplutôt queleftetrightsi le site a des versions dans des langues qui s’écrivent de droite à gauche.
Entrées associées
#- text-indentDéfinit le retrait de la première ligne de texte dans un bloc.
- vertical-alignAligne verticalement les éléments en ligne et le contenu des cellules de tableau.
- justify-contentRépartit les éléments le long de l’axe principal d’un conteneur flex ou grid.
- white-spaceDétermine comment traiter les espaces, les retours à la ligne et le retour automatique dans le texte.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.