Teksti joondamine - CSS-trikid

Anonim

text-alignVara CSS kasutatakse viies sisemise sisu ploki element.

p ( text-align: center; )

Need on teksti joondamise traditsioonilised väärtused:

  • left- Vaikeväärtus. Sisu joondatakse vasakul küljel.
  • right - Sisu joondub piki paremat külge.
  • center- Sisu tsentreerub vasaku ja parema serva vahele. Iga rea ​​vasakul ja paremal küljel peaks tühimik olema võrdne.
  • justify - Sisu tühikud nii, et ühele reale mahuks võimalikult palju plokke ja selle rea esimene sõna oleks piki vasakut ja viimane sõna paremat serva.
  • inherit - Väärtus on ükskõik milline vanema elemendi väärtus.

"Sisu" kasutatakse siin terminina "teksti" asemel, sest kuigi teksti joondamine mõjutab kindlasti teksti, mõjutab see kõiki selle konteineri sisse- või seesblokeerivaid elemente.

Ka CSS3-s on kaks uut väärtust, algus ja lõpp. Need väärtused muudavad mitme keele toetamise lihtsamaks. Näiteks inglise keel on vasakult paremale (ltr) ja araabia keel paremalt vasakule (rtl). Väärtuste „parem” ja „vasak” kasutamine on liiga jäik ja ei muutu suuna muutudes. Need uued väärtused kohanevad:

  • start - Sama mis vasakul kirjas ltr, sama mis paremal rtl-s.
  • end - Sama mis ltris paremal, rtl vasakul.

Samuti on match-parentsarnane inheritvaid sellega, et uus väärtus arvutatakse praeguse elemendi suuna järgi, selle asemel, et seda teha.

Spetsifikatsioonis on mõned asjad, millel pole veel brauseri tuge. Üks on väärtus “algus lõpp”, mis joondaks esimese rea, nagu oleks “algus”, ja kõik järgnevad read, nagu see oleks “lõpp”. Teine on väärtuse andmine stringile, näiteks text-align: "." start;Tekst joonistub selle esimesel esinemisel, nagu arvude veeru reastamiseks kümnendkoha täpsusega.

Näited

See tekst on vasakule joondatud.

See tekst on joondatud paremale.

Ma olen keskendunud!

Ma olen õigustatud. Ma täidan ruumi täpselt (välja arvatud viimasel real), isegi kui ma pean mõnikord natuke venitama.

Pärin oma vanema joonduse. Sel juhul tähendab see vasakule jäämist.

Brauseri tugi

Vasakule, paremale, keskele põhjendage:

Chrome Safari Firefox Ooper IE Android iOS
Ükskõik Ükskõik Ükskõik 3,5+ 3+ Ükskõik Ükskõik

Sest startja endväärtused:

Chrome Safari Firefox Ooper IE Android iOS
Ükskõik 3.1+ 3.6+ Puudub Puudub Ükskõik Ükskõik