Text-align - Astuces CSS

Anonim

La text-alignpropriété en CSS est utilisée pour aligner le contenu interne d'un élément de bloc.

p ( text-align: center; )

Voici les valeurs traditionnelles de text-align:

  • left- La valeur par défaut. Le contenu s'aligne sur le côté gauche.
  • right - Le contenu s'aligne sur le côté droit.
  • center- Le contenu se centre entre les bords gauche et droit. L'espace blanc sur les côtés gauche et droit de chaque ligne doit être égal.
  • justify - Le contenu est espacé de manière à ce que le plus grand nombre de blocs tienne sur une seule ligne et que le premier mot de cette ligne se trouve le long du bord gauche et le dernier mot le long du bord droit.
  • inherit - La valeur sera celle de l'élément parent.

«Contenu» est utilisé ici comme terme au lieu de «texte», car alors que text-align affecte certainement le texte, il affecte tous les éléments en ligne ou en bloc dans ce conteneur.

Il existe également deux nouvelles valeurs dans CSS3, start et end. Ces valeurs facilitent la prise en charge de plusieurs langues Par exemple, l'anglais est une langue de gauche à droite (ltr) et l'arabe est une langue de droite à gauche (rtl). L'utilisation de «droite» et «gauche» pour les valeurs est trop rigide et ne s'adapte pas lorsque la direction change. Ces nouvelles valeurs s'adaptent:

  • start - Identique à «gauche» dans ltr, identique à «droite» dans rtl.
  • end - Identique à «droite» dans ltr, identique à «gauche» dans rtl.

Il y a aussi match-parent, ce qui est similaire à inherit, seulement que la nouvelle valeur est calculée par rapport à la direction de l'élément actuel au lieu de, vous savez, ne pas faire cela.

Il y a quelques éléments dans la spécification qui n'ont pas encore de support de navigateur. La première est la valeur «start end» qui alignerait la première ligne comme si elle était «start» et toutes les lignes suivantes comme si elle était «end». Un autre est de donner à la valeur une chaîne, comme text-align: "." start;Le texte s'aligne le long de la première occurrence de cela, comme pour aligner une colonne de nombres le long d'un point décimal.

Exemples

Ce texte est aligné à gauche.

Ce texte est aligné à droite.

Je suis centré!

Je suis justifié. Je remplis exactement l'espace (sauf sur la dernière ligne), même si je dois parfois m'étirer un peu.

J'hérite de l'alignement de mon parent. Dans ce cas, cela signifie à gauche.

Prise en charge du navigateur

Pour gauche, droite, centre, justifiez:

Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
Tout Tout Tout 3,5+ 3+ Tout Tout

Pour les valeurs startet end:

Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
Tout 3.1+ 3.6+ Aucun Aucun Tout Tout