Tekstjustering - CSS-triks

Anonim

Den text-alignegenskap i CSS brukes for å justere det indre innhold av et blokkelement.

p ( text-align: center; )

Dette er de tradisjonelle verdiene for tekstjustering:

  • left- Standardverdien. Innholdet justeres langs venstre side.
  • right - Innholdet justeres langs høyre side.
  • center- Innholdssentre mellom venstre og høyre kant. Hvitt mellomrom på venstre og høyre side av hver linje skal være likt.
  • justify - Innholdsrom ut slik at så mange blokker passer på en linje som mulig, og det første ordet på den linjen er langs venstre kant og det siste ordet er langs høyre kant.
  • inherit - Verdien vil være hva foreldrelementet er.

"Innhold" brukes her som begrep i stedet for "tekst", for mens tekstjustering absolutt påvirker tekst, påvirker det alle innebygde eller innebygde blokkeringselementer i den beholderen.

Det er to nye verdier i CSS3 også, start og slutt. Disse verdiene gjør det lettere å støtte flere språk. For eksempel er engelsk et venstre-til-høyre-språk (ltr) og arabisk er et høyre-til-venstre-språk (rtl). Å bruke “høyre” og “venstre” for verdier er for stivt og tilpasser seg ikke når retningen endres. Disse nye verdiene tilpasser seg:

  • start - Samme som “venstre” i ltr, samme som “høyre” i rtl.
  • end - Samme som “høyre” i ltr, samme som “venstre” i rtl.

Det er også match-parent, som ligner på inherit, bare at den nye verdien beregnes mot det aktuelle elementets retning i stedet for, vet du, ikke gjør det.

Det er noen få ting i spesifikasjonen som ikke har noen nettleserstøtte ennå. Den ene er verdien "start slutten" som vil justere den første linjen som om den var "start" og eventuelle påfølgende linjer som om den var "slutt". En annen gir verdien en streng, som text-align: "." start;Teksten vil ligge langs den første forekomsten av den, som for å rette opp en kolonne med tall langs et desimaltegn.

Eksempler

Denne teksten er venstrejustert.

Denne teksten er riktig justert.

Jeg er sentrert!

Jeg er berettiget. Jeg fyller plassen nøyaktig (unntatt på siste linje), selv om jeg til tider må strekke meg litt.

Jeg arver tilpasningen til foreldrene mine. I dette tilfellet betyr det venstre.

Nettleserstøtte

For venstre, høyre, sentrum, rettferdiggjør:

Chrome Safari Firefox Opera DVS Android iOS
Noen Noen Noen 3.5+ 3+ Noen Noen

For startog endverdiene:

Chrome Safari Firefox Opera DVS Android iOS
Noen 3.1+ 3.6+ Ingen Ingen Noen Noen