Home-theater-designers
L'une des premières fonctionnalités que tous les développeurs ont apprises lorsqu'ils se sont familiarisés avec le traitement de texte était l'alignement du texte. Ce petit outil a été vital pour les typographes professionnels et les concepteurs de flyers amateurs. Il n'est pas surprenant que CSS prenne en charge l'alignement de texte en matière de conception Web.
Les aligner le texte La propriété, avec une ou deux autres, contrôle la façon dont un élément aligne horizontalement son texte. Au-delà des bases, les navigateurs implémentent lentement davantage de spécifications, mais la prise en charge complète varie. Découvrez comment aligner du texte et quelles fonctionnalités les navigateurs courants prennent en charge aujourd'hui.
Les bases de la propriété CSS text-align
L'alignement est l'un des termes typographiques les plus connus. Dans le cadre du CSS, aligner le texte fait référence à l'alignement horizontal.
L'alignement horizontal du texte ne s'applique qu'aux conteneurs de blocs. Ce sont des éléments pleine largeur tels que des paragraphes et des divs. En utilisant le aligner le texte propriété sur un élément en ligne tel que dans n'aura aucun effet. Vous pouvez également aligner des éléments de liste et des cellules de tableau :
la ps4 joue-t-elle aux jeux ps3 ?
Par défaut, dans une langue de gauche à droite (plus de détails plus tard), le texte s'aligne à gauche :
En CSS, c'est la même chose que :
p { text-align: left; }Ou:
p { text-align: start; }En rapport: Que sont les feuilles de style en cascade et à quoi sert CSS ?
Vous pouvez utiliser d'autres valeurs pour le aligner le texte propriété pour modifier l'alignement horizontal. Les valeurs les plus courantes sont connues des applications de traitement de texte :
text-align: left
text-align: center
text-align: rightUtiliser la justification pour aligner les bords gauche et droit
Une autre valeur commune pour aligner le texte est justifier . Les navigateurs ajoutent de l'espace au texte justifié afin que chaque ligne s'étende pour remplir l'espace disponible :
Lorsque vous justifiez du texte, la dernière ligne peut être délicate. Comme il peut être très court (peut-être juste un seul mot), l'espacement sur toute la largeur peut être laid. Par défaut, même le texte justifié alignera la dernière ligne à gauche.
abonnés instagram qui ne suivent pas en arrière
Vous pouvez parfois vouloir un effet différent. Les implémentations du navigateur rattrapent la spécification, mais deux approches sont possibles.
Les justifier-tout La valeur devrait signifier que les navigateurs traitent la dernière ligne comme toutes les autres et l'étirent sur toute la largeur. Cependant, au moment de la rédaction, aucun navigateur ne prend en charge cette valeur. Vous pouvez vérifier caniuse pour voir s'ils le font quand vous lisez cet article.
Une autre propriété CSS, text-align-last , est plus flexible et bénéficie d'un meilleur support. Vous pouvez le traiter plus ou moins de la même manière que aligner le texte , mais cela ne s'applique qu'à la dernière ligne :
La prise en charge du navigateur pour cette propriété est meilleure, mais pas parfaite. De nouveau, vérifier caniuse avant de l'utiliser . Si un navigateur ne reconnaît pas cette propriété, il l'ignorera.
Alignement du texte et sens de lecture
Vous travaillez peut-être avec une langue, comme l'arabe ou l'hébreu, qui se lit de droite à gauche. CSS utilise le direction propriété pour spécifier ceci, par exemple :
direction: rtl;Ces langues alignent généralement le texte à droite par défaut.
Au lieu d'avoir à préciser la gauche / droit , la méthode préférée pour aligner le texte utilise les valeurs début et finir . Ceci spécifie si le texte doit s'aligner au début de chaque ligne ou à la fin. Dans les langues de gauche à droite, début est équivalent à la gauche . Dans une langue écrite de droite à gauche, le texte commence à droite et se termine à gauche.
Windows 10 réinitialisation d'usine depuis le démarrage
À l'aide de début ou finir signifie que, quelle que soit la direction du texte, l'alignement est cohérent.
Comment les éléments héritent de la propriété text-align
Vous devez savoir que le aligner le texte la propriété hérite. Par exemple, si vous le définissez sur le corps élément, il s'appliquera à chaque élément de la page. Vous pouvez, bien sûr, le surcharger sur n'importe quel élément.
Utilisation de la propriété text-align pour contrôler la mise en page
Vous pouvez utiliser le aligner le texte Propriété CSS pour définir comment les navigateurs disposent le texte horizontalement. Les valeurs les plus courantes sont la gauche , droit , centre , et justifier . Celles-ci sont assez simples, bien que justifier introduit une certaine complexité.
Vous devez utiliser l'alignement du texte avec parcimonie. Sur les panneaux d'affichage et les affiches, l'alignement central peut être approprié, mais il peut rendre les blocs de texte plus longs difficiles à lire. La justification est généralement plus lisible lorsque les lignes de texte sont plus longues. Justifier de courtes colonnes de texte peut créer un espacement désagréable.
Les aligner le texte La propriété est l'une des nombreuses propriétés CSS qui fournissent une mise en forme utile et un positionnement de base.
Partager Partager Tweeter E-mail 10 exemples de code CSS simples que vous pouvez apprendre en 10 minutesBesoin d'aide avec CSS ? Essayez ces exemples de code CSS de base pour commencer, puis appliquez-les à vos propres pages Web.
Lire la suite Rubriques connexes- La programmation
- Développement web
- Création de sites web
- CSS
Bobby est un passionné de technologie qui a travaillé comme développeur de logiciels pendant près de deux décennies. Il est passionné par les jeux, travaillant comme rédacteur de critiques au Switch Player Magazine, et est immergé dans tous les aspects de la publication en ligne et du développement Web.
Plus de Bobby JackAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner