Gjør ting i tråd med egenskapen CSS Text Align

Gjør ting i tråd med egenskapen CSS Text Align

En av de første funksjonene alle utviklere lærte om når de tok tak i tekstbehandling, var tekstjustering. Det lille verktøyet har vært avgjørende for både profesjonelle settere og amatørflygerdesignere. Det er ingen overraskelse at CSS har støtte for tekstjustering når det gjelder webdesign.





De tekstjustering eiendom, sammen med en eller to andre, styrer hvordan et element justerer teksten horisontalt. Utover det grunnleggende implementerer nettlesere sakte flere spesifikasjoner, men full støtte varierer. Lær hvordan du justerer tekst og hvilke funksjoner de vanlige nettleserne støtter i dag.





Grunnleggende om CSS-tekstjusteringsegenskapen

Justering er et av de mest kjente typografitermene. I sammenheng med CSS, tekstjustering refererer til horisontal justering.





Horisontal tekstjustering gjelder bare for blokkbeholdere. Dette er elementer i full bredde som avsnitt og div. Bruker tekstjustering eiendom på et innebygd element som f.eks i vil ikke ha noen effekt. Du kan også justere listeelementer og tabellceller:

datamaskinen ser ikke ekstern harddisk

Som standard, på et språk fra venstre til høyre (mer av dette senere), justeres teksten til venstre:



I CSS er dette det samme som:

p { text-align: left; }

Eller:





p { text-align: start; }

I slekt: Hva er Cascading Style Sheets og hva brukes CSS til?

Du kan bruke andre verdier for tekstjustering egenskap for å endre horisontal justering. De vanligste verdiene er kjent fra tekstbehandlingsapper:





text-align: left
text-align: center
text-align: right

Bruk begrunnelse for å justere venstre og høyre kant

En annen felles verdi for tekstjustering er rettferdiggjøre . Nettlesere legger til plass i berettiget tekst, slik at hver linje strekker seg for å fylle den tilgjengelige plassen:

Når du begrunner tekst, kan den siste linjen være vanskelig. Siden det kan være veldig kort (muligens bare et enkelt ord), kan det være stygt å ha avstand over hele bredden. Som standard vil selv berettiget tekst justere den siste linjen til venstre.

hvordan tørke en stasjon windows 10

Noen ganger vil du kanskje ha en annen effekt. Nettleserimplementeringene følger opp spesifikasjonen, men to tilnærminger er mulige.

De rettferdiggjøre-alt verdi skal bety at nettlesere behandler den siste linjen som alle de andre, og strekker den til hele bredden. I skrivende stund støtter imidlertid ingen nettleser denne verdien. Du kan sjekk caniuse for å se om de gjør det når du leser denne artikkelen.

En annen CSS -eiendom, tekst-juster-siste , er mer fleksibel og har bedre støtte. Du kan behandle det mer eller mindre det samme som tekstjustering , men det gjelder bare den siste linjen:

Nettleserstøtte for denne egenskapen er bedre, men ikke perfekt. En gang til, sjekk caniuse før du bruker den . Hvis en nettleser ikke gjenkjenner denne egenskapen, ignorerer den den.

Tekstjustering og leseretning

Du jobber kanskje med et språk, for eksempel arabisk eller hebraisk, som leser fra høyre til venstre. CSS bruker retning egenskapen for å spesifisere dette, for eksempel:

direction: rtl;

Disse språkene justerer vanligvis tekst til høyre som standard.

I stedet for å måtte spesifisere venstre / Ikke sant , den foretrukne måten å justere tekst på bruker verdiene start og slutt . Dette angir om teksten skal stå på linje i begynnelsen av hver linje eller slutten. På venstre til høyre språk, start tilsvarer venstre . På et språk fra høyre til venstre starter teksten til høyre og slutter til venstre.

hvordan dele posisjon på iphone

Ved hjelp av start eller slutt betyr at justering er uavhengig av tekstretning.

Hvordan elementer arver egenskapen for tekstjustering

Du bør være oppmerksom på at tekstjustering eiendom arver. For eksempel, hvis du setter det på kropp element, vil det gjelde for hvert element på siden. Du kan selvfølgelig overstyre det på ethvert element.

Bruke egenskapen for tekstjustering for å kontrollere oppsett

Du kan bruke tekstjustering CSS -egenskap for å definere hvordan nettlesere legger ut tekst horisontalt. De vanligste verdiene er venstre , Ikke sant , senter , og rettferdiggjøre . Disse er ganske enkle, selv om rettferdiggjøre introduserer en viss kompleksitet.

Du bør bruke tekstjustering sparsomt. På tavler og plakater kan sentral justering være passende, men det kan gjøre lengre tekstblokker vanskelig å lese. Begrunnelse er vanligvis mer lesbar når tekstlinjer er lengre. Å begrense korte kolonner med tekst kan skape stygg avstand.

De tekstjustering eiendom er en av mange CSS -egenskaper som gir nyttig formatering og grunnleggende posisjonering.

Dele Dele kvitring E -post 10 enkle CSS -kodeeksempler du kan lære på 10 minutter

Trenger du hjelp med CSS? Prøv disse grunnleggende CSS -kodeeksemplene til å begynne med, og bruk dem deretter på dine egne websider.

Les neste
Relaterte temaer
  • Programmering
  • Webutvikling
  • Webdesign
  • CSS
Om forfatteren Bobby Jack(58 artikler publisert)

Bobby er en teknologientusiast som jobbet som programvareutvikler i de fleste to tiårene. Han brenner for spill, jobber som Reviews Editor i Switch Player Magazine, og er fordypet i alle aspekter av online publisering og webutvikling.

Mer fra Bobby Jack

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere