text-align |
Alignement texte |
|---|---|
| CSS |
Syntaxe
| text-align: paramètres; |
Paramètres
| Paramètre | Description | |
|---|---|---|
| paramètres | Ce paramètre de propriété permet d'indiquer l'alignement du texte horizontal : | |
| Constante | Description | |
| "center" | Cette constante indique que l'alignement sera effectuer à partir du centre | |
| "justify" | Cette constante indique que l'alignement sera effectuer des côtés de façon a étiré le texte, en ajoutant des espaces au besoin, pour qu'il soit droit | |
| "left" | Cette constante indique que l'alignement sera effectuer à partir de la gauche | |
| "right" | Cette constante indique que l'alignement sera effectuer à partir de la droite | |
Description
Cette propriété permet de spécifier le déplacement horizontal d'un texte: Vert le gauche, le droite, au milieu, justifié,....
Remarques
- Si vous ne voulez pas de changement de ligne pour un symbole de ponctuation comme «:», «!» ou «?» après un mot, vous devriez remplacer l'espace par le caractère « ». Exemple, pour obtenir le «Bonjour !» sur la même ligne, vous devriez écrire «Bonjour !»
- Alignement horizontal du texte : La propriété text-align est principalement utilisée pour définir l'alignement horizontal du texte à l'intérieur d'un conteneur. Elle prend des valeurs comme left, right, center, et justify. C'est une propriété essentielle pour organiser du contenu textuel et garantir une présentation claire et professionnelle, en particulier dans les entêtes, paragraphes et listes.
- Impact des valeurs justify : La valeur justify distribue uniformément le texte sur toute la largeur du conteneur, créant un alignement des deux côtés. Cependant, cela peut introduire des espaces excessifs entre les mots dans des textes courts ou mal formatés. Pour un meilleur rendu, utilisez des outils comme hyphens: auto; pour permettre la césure des mots, réduisant les espaces inégaux.
- Interaction avec direction : L'effet de text-align dépend de la direction du texte définie par direction. Pour les langues de gauche à droite (LTR), left aligne le texte sur le bord gauche, tandis que pour les langues de droite à gauche (RTL), right devient le bord par défaut. Lors de la conception d'interfaces multilingues, veillez à ajuster text-align pour correspondre à la direction du texte.
- Alignement des éléments en ligne et blocs imbriqués : Bien que text-align affecte le texte, il influence également les éléments inline ou inline-block imbriqués. Par exemple, des images ou des boutons alignés au centre à l'aide de text-align: center suivront la règle appliquée au conteneur parent. Cela peut être utilisé pour centrer des éléments légers sans nécessiter de propriétés supplémentaires.
- Utilisation de start et end pour une flexibilité multilingue : Les valeurs start et end offrent un moyen flexible d'aligner le texte en fonction de la direction naturelle de la langue. start aligne le texte sur le bord de début (gauche pour LTR, droit pour RTL), et end sur le bord opposé. Ces valeurs sont particulièrement utiles pour concevoir des interfaces multilingues sans avoir à modifier manuellement l'alignement.
- Propriété héritée et effets sur les enfants : text-align est une propriété héritée, ce qui signifie qu'elle est automatiquement appliquée aux éléments enfants sauf si elle est redéfinie. Cela peut simplifier le style de groupes d'éléments comme des paragraphes dans un conteneur. Cependant, soyez attentif aux cas où certains enfants nécessitent un alignement différent pour éviter des incohérences visuelles.
- Alignement dans les tableaux et conteneurs flexibles : Dans les tableaux HTML, text-align peut être utilisé pour contrôler l'alignement horizontal du texte dans les cellules. Cependant, lorsqu'il est utilisé dans des conteneurs flex ou grid, son effet peut être limité car ces modèles de mise en page privilégient leurs propres règles d'alignement. Dans ces cas, utilisez des propriétés comme align-items ou justify-content pour un contrôle plus précis.
- Effet sur les blocs et le centrage vertical : Contrairement à ce que son nom peut suggérer, text-align n'affecte pas l'alignement vertical du texte ou des éléments dans un conteneur. Pour un alignement vertical, utilisez des propriétés complémentaires comme line-height ou des techniques modernes comme flexbox. Cela évite toute confusion et garantit une mise en page bien structurée et équilibrée.
Exemple
L'exemple suivant permet de montrer une représentation d'un paragraphe avec un style justifié (avec les côté droit et côté gauche aligné) :
- <p style="text-align: justify;">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum quam, accumsan quis auctor in, luctus vitae ligula. Curabitur id orci sagittis, venenatis urna a, egestas orci. Aenean vitae euismod ligula. Etiam turpis justo, gravida vitae leo quis, maximus fermentum turpis. Suspendisse ultricies orci vitae purus ornare sodales. Aliquam pretium pellentesque dolor quis dignissim. Vivamus congue lacus sodales quam vestibulum rhoncus. Ut consequat sem nisl, quis mollis tellus sagittis in. Fusce porttitor sit amet arcu et hendrerit. Etiam nulla odio, maximus quis malesuada vel, feugiat eget sapien.
- </p>
on obtiendra le résultat suivant :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum quam, accumsan quis auctor in, luctus vitae ligula. Curabitur id orci sagittis, venenatis urna a, egestas orci. Aenean vitae euismod ligula. Etiam turpis justo, gravida vitae leo quis, maximus fermentum turpis. Suspendisse ultricies orci vitae purus ornare sodales. Aliquam pretium pellentesque dolor quis dignissim. Vivamus congue lacus sodales quam vestibulum rhoncus. Ut consequat sem nisl, quis mollis tellus sagittis in. Fusce porttitor sit amet arcu et hendrerit. Etiam nulla odio, maximus quis malesuada vel, feugiat eget sapien.
Dernière mise à jour : Vendredi, le 21 février 2020