Sulyginti tekstą - CSS-gudrybės

Anonim

text-alignCSS nuosavybė naudojama suderinti vidinį turinį bloko elementas.

p ( text-align: center; )

Tai yra tradicinės teksto sulyginimo vertės:

  • left- Numatytoji vertė. Turinys sulygiuotas kairėje pusėje.
  • right - Turinys sulygiuotas dešinėje pusėje.
  • center- Turinio centrai tarp kairiojo ir dešiniojo kraštų. Baltoji erdvė kairėje ir dešinėje kiekvienos eilutės pusėje turėtų būti lygi.
  • justify - Turinio tarpai išdėstyti taip, kad kuo daugiau blokų tilptų vienoje eilutėje, o pirmasis žodis toje eilutėje yra kairiajame krašte, o paskutinis - dešiniajame krašte.
  • inherit - Vertė bus tokia, kokia yra pagrindinio elemento reikšmė.

„Turinys“ čia vartojamas kaip terminas, o ne „tekstas“, nes nors teksto sulygiavimas tikrai veikia tekstą, jis veikia visus toje talpykloje esančius įterptinius arba įterptinius elementus.

CSS3 taip pat yra dvi naujos reikšmės: pradžia ir pabaiga. Šios vertės palengvina kelių kalbų palaikymą. Pavyzdžiui, anglų kalba yra kalba iš kairės į dešinę (ltr), o arabų kalba - kalba iš dešinės į kairę (rtl). Vertėms naudoti „dešinę“ ir „kairę“ yra per griežta ir ji neprisitaiko keičiantis krypčiai. Šios naujos vertybės prisitaiko:

  • start - Tas pats, kas „kairysis“ ltr, tas pats kaip „dešinysis“ rtl.
  • end - Tas pats kaip „dešinė“ ltr, tas pats kaip „kairysis“ rtl.

Yra ir tai match-parent, kas yra panašu į tai inherit, kad naujoji vertė apskaičiuojama pagal dabartinio elemento kryptį, o ne, jūs žinote, to nedarote.

Specifikacijoje yra keli dalykai, kurie dar neturi jokios naršyklės palaikymo. Viena yra vertė „pradžios pabaiga“, kuri sulygins pirmąją eilutę taip, tarsi būtų „pradžia“, ir visas kitas eilutes lyg „pabaiga“. Kitas yra vertės text-align: "." start;suteikimas eilutei , pvz ., Tekstas sulygins išilgai pirmo įvykio, kaip kad surikiuotų skaičių stulpelį išilgai dešimtainio kablelio.

Pavyzdžiai

Šis tekstas kairėje sulygiuotas.

Šis tekstas sulygiuotas teisingai.

Aš esu centre!

Aš pateisinamas. Tiksliai užpildau vietą (išskyrus paskutinę eilutę), net jei kartais tenka šiek tiek pasitempti.

Aš paveldiu savo tėvų lygybę. Šiuo atveju tai reiškia kairę.

Naršyklės palaikymas

Kairėje, dešinėje, centre pateisinkite:

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Bet koks Bet koks Bet koks 3,5 ir daugiau 3+ Bet koks Bet koks

Dėl startir endreikšmių:

„Chrome“ „Safari“ „Firefox“ Opera T.Y „Android“ „iOS“
Bet koks 3.1+ 3.6+ Nė vienas Nė vienas Bet koks Bet koks