Stil tingene op med egenskaben CSS Text Align

Stil tingene op med egenskaben CSS Text Align

En af de første funktioner, alle udviklere lærte om, når de fik styr på tekstbehandling, var tekstjustering. Det lille værktøj har været afgørende for både professionelle sættere og amatørflyer -designere. Det er ingen overraskelse, at CSS har understøttelse af tekstjustering, når det kommer til webdesign.





Det tekstjustering egenskab styrer sammen med en eller to andre, hvordan et element justerer teksten vandret. Ud over det grundlæggende implementerer browsere langsomt flere af specifikationerne, men fuld support varierer. Lær, hvordan du justerer tekst, og hvilke funktioner de almindelige browsere understøtter i dag.





Det grundlæggende i CSS-tekstjusteringsejendommen

Justering er et af de mest kendte typografiske udtryk. I forbindelse med CSS, tekstjustering refererer til vandret justering.





Vandret tekstjustering gælder kun for blokbeholdere. Disse er elementer i fuld bredde, f.eks. Afsnit og div. Bruger tekstjustering ejendom på et inline -element som f.eks i vil ikke have nogen effekt. Du kan også justere listeelementer og tabelceller:

Windows 10 tager 10 minutter at starte

Som standard justeres teksten i venstre til højre sprog (mere af dette senere) til venstre:



I CSS er dette det samme som:

p { text-align: left; }

Eller:





p { text-align: start; }

Relaterede: Hvad er Cascading Style Sheets, og hvad bruges CSS til?

Du kan bruge andre værdier til tekstjustering egenskab til at ændre vandret justering. De mest almindelige værdier kendes fra tekstbehandlingsapps:





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

Brug begrundelse til at justere venstre og højre kant

En anden fælles værdi for tekstjustering er begrunde . Browsere tilføjer plads til berettiget tekst, så hver linje strækker sig til at udfylde den tilgængelige plads:

Når du begrunder tekst, kan den sidste linje være vanskelig. Da det kan være meget kort (muligvis kun et enkelt ord), kan det være grimt at placere det på tværs af hele bredden. Som standard vil selv berettiget tekst justere den sidste linje til venstre.

hvordan man monterer et drev i linux

Nogle gange vil du måske have en anden effekt. Browserimplementeringer indhenter specifikationen, men to tilgange er mulige.

Det retfærdiggøre-alt værdi skal betyde, at browsere behandler den sidste linje som alle de andre, og strækker den til fuld bredde. Men i skrivende stund understøtter ingen browser denne værdi. Du kan tjek caniuse for at se om de gør når du læser denne artikel.

En anden CSS -ejendom, tekst-juster-sidste , er mere fleksibel og har bedre support. Du kan behandle det mere eller mindre det samme som tekstjustering , men det gælder kun den sidste linje:

Browsersupport til denne ejendom er bedre, men ikke perfekt. Igen, tjek den, før du bruger den . Hvis en browser ikke genkender denne ejendom, ignorerer den den.

Tekstjustering og læseretning

Du arbejder muligvis med et sprog, f.eks. Arabisk eller hebraisk, der læser fra højre til venstre. CSS bruger retning egenskab for at angive dette, for eksempel:

direction: rtl;

Disse sprog justerer normalt tekst til højre som standard.

I stedet for at skulle specificere venstre / ret , den foretrukne måde at justere tekst på, bruger værdierne Start og ende . Dette angiver, om teksten skal stå i kø ved starten af ​​hver linje eller slutningen. På sprog fra venstre til højre, Start svarer til venstre . I et sprog fra højre til venstre starter teksten til højre og slutter til venstre.

windows 10 fabriks nulstilling fra boot

Ved brug af Start eller ende betyder, at uanset tekstretning er justering konsekvent.

Hvordan elementer arver egenskaben tekstjustering

Du skal være opmærksom på, at tekstjustering ejendom arver. For eksempel, hvis du indstiller det på legeme element, gælder det for hvert element på siden. Du kan naturligvis tilsidesætte det på ethvert element.

Brug af tekstjusteringsegenskaben til at styre layout

Du kan bruge tekstjustering CSS -egenskab til at definere, hvordan browsere lægger tekst vandret ud. De mest almindelige værdier er venstre , ret , centrum , og begrunde . Disse er ganske ligetil, selvom begrunde indfører en vis kompleksitet.

Du bør bruge tekstjustering sparsomt. På billboards og plakater kan centraljustering være passende, men det kan gøre længere tekstblokke vanskelige at læse. Begrundelse er normalt mere læsbar, når tekstlinjer er længere. Retfærdiggørelse af korte tekstkolonner kan skabe grim afstand.

Det tekstjustering egenskab er en af ​​mange CSS -egenskaber, der giver nyttig formatering og grundlæggende positionering.

Del Del Tweet E -mail 10 simple CSS -kodeeksempler, du kan lære på 10 minutter

Brug for hjælp til CSS? Prøv disse grundlæggende CSS -kodeeksempler til at starte med, og anvend dem derefter på dine egne websider.

Læs Næste
Relaterede emner
  • Programmering
  • Web-udvikling
  • Webdesign
  • CSS
Om forfatteren Bobby Jack(58 artikler udgivet)

Bobby er en teknologientusiast, der arbejdede som softwareudvikler i det meste af to årtier. Han brænder for spil, arbejder som Reviews Editor hos Switch Player Magazine og er nedsænket i alle aspekter af onlineudgivelse og webudvikling.

Mere fra Bobby Jack

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere