{"id":91495,"date":"2022-10-11T22:04:35","date_gmt":"2022-10-12T03:04:35","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/sammanstall-saker-och-ting-med-egenskapen-css-text-align\/"},"modified":"2022-10-11T22:04:35","modified_gmt":"2022-10-12T03:04:35","slug":"sammanstall-saker-och-ting-med-egenskapen-css-text-align","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/sammanstall-saker-och-ting-med-egenskapen-css-text-align\/","title":{"rendered":"Sammanst\u00e4ll saker och ting med egenskapen CSS Text Align"},"content":{"rendered":"
\n

En av de f\u00f6rsta funktionerna som alla utvecklare l\u00e4rde sig om n\u00e4r de fick grepp om ordbehandling var textjustering. Det lilla verktyget har varit avg\u00f6rande f\u00f6r b\u00e5de professionella s\u00e4ttare och amat\u00f6rdesigners av flygblad. Det \u00e4r ingen \u00f6verraskning att CSS har st\u00f6d f\u00f6r textjustering n\u00e4r det kommer till webbdesign.<\/p>\n

De textjustera<\/strong> egenskapen, tillsammans med en eller tv\u00e5 andra, styr hur ett element justerar sin text horisontellt. Ut\u00f6ver grunderna implementerar webbl\u00e4sare l\u00e5ngsamt mer av specifikationerna, men fullt st\u00f6d varierar. L\u00e4r dig hur du justerar text och vilka funktioner de vanliga webbl\u00e4sarna st\u00f6der idag.<\/p>\n

<\/span> Grunderna f\u00f6r CSS-textjusteringsegenskapen<\/span><\/h2>\n

Justering \u00e4r en av de mest v\u00e4lk\u00e4nda typografitermerna. I samband med CSS, textjustera<\/strong> h\u00e4nvisar till horisontell inriktning.<\/p>\n

Horisontell textjustering g\u00e4ller endast blockbeh\u00e5llare. Dessa \u00e4r element i full bredd som stycken och div. Anv\u00e4nda textjustera<\/strong> egenskap p\u00e5 ett inline-element som t.ex em<\/strong> kommer inte att ha n\u00e5gon effekt. Du kan ocks\u00e5 justera listobjekt och tabellceller:<\/p>\n

\n<\/figure>\n

Som standard, p\u00e5 ett spr\u00e5k fr\u00e5n v\u00e4nster till h\u00f6ger (mer om detta senare), justeras texten till v\u00e4nster:<\/p>\n

\n<\/figure>\n

I CSS \u00e4r detta samma sak som:<\/p>\n

p { text-align: left; }<\/pre>\n
Eller:<\/p>\n
p { text-align: start; }<\/pre>\n
Du kan anv\u00e4nda andra v\u00e4rden f\u00f6r textjustera<\/strong> egenskap f\u00f6r att \u00e4ndra horisontell inriktning.  De vanligaste v\u00e4rdena \u00e4r bekanta fr\u00e5n ordbehandlingsappar:<\/p>\n
text-align: lefttext-align: centertext-align: right<\/pre>\n
\n<\/figure>\n
<\/span>  Anv\u00e4nd Justering f\u00f6r att justera v\u00e4nster och h\u00f6ger kanter<\/span><\/h2>\n
Ett annat gemensamt v\u00e4rde f\u00f6r textjustera<\/strong> \u00e4r r\u00e4ttf\u00e4rdiga<\/strong>.  Webbl\u00e4sare l\u00e4gger till utrymme till justerad text s\u00e5 att varje rad str\u00e4cker sig f\u00f6r att fylla det tillg\u00e4ngliga utrymmet:<\/p>\n
\n<\/figure>\n
N\u00e4r du motiverar text kan den sista raden vara knepig.  Eftersom det kan vara v\u00e4ldigt kort (m\u00f6jligen bara ett enda ord), kan det vara fult att placera det \u00f6ver hela bredden.  Som standard kommer \u00e4ven justerad text att justera den sista raden till v\u00e4nster.<\/p>\n
Ibland kanske du vill ha en annan effekt.  Webbl\u00e4sarimplementationer kommer ikapp specen, men tv\u00e5 tillv\u00e4gag\u00e5ngss\u00e4tt \u00e4r m\u00f6jliga.<\/p>\n
De motivera-allt<\/strong> v\u00e4rde b\u00f6r betyda att webbl\u00e4sare behandlar den sista raden som alla andra och str\u00e4cker ut den till full bredd.  Men i skrivande stund st\u00f6der ingen webbl\u00e4sare detta v\u00e4rde.  Du kan kolla caniuse f\u00f6r att se om de g\u00f6r det n\u00e4r du l\u00e4ser den h\u00e4r artikeln.<\/p>\n
En annan CSS-egenskap, text-justera-sist<\/strong>, \u00e4r mer flexibel och har b\u00e4ttre st\u00f6d.  Du kan behandla det mer eller mindre p\u00e5 samma s\u00e4tt som textjustera<\/strong>, men det g\u00e4ller bara den sista raden:<\/p>\n
\n<\/figure>\n
Webbl\u00e4sarst\u00f6d f\u00f6r den h\u00e4r egenskapen \u00e4r b\u00e4ttre, men inte perfekt.  \u00c5terigen, kontrollera caniuse innan du anv\u00e4nder den.  Om en webbl\u00e4sare inte k\u00e4nner igen den h\u00e4r egenskapen kommer den att ignorera den.<\/p>\n
<\/span>  Textjustering och l\u00e4sriktning<\/span><\/h2>\n
Du kanske arbetar med ett spr\u00e5k, som arabiska eller hebreiska, som l\u00e4ser fr\u00e5n h\u00f6ger till v\u00e4nster.  CSS anv\u00e4nder riktning<\/strong> egenskap f\u00f6r att specificera detta, till exempel:<\/p>\n
direction: rtl;<\/pre>\n
Dessa spr\u00e5k justerar vanligtvis text till h\u00f6ger som standard.<\/p>\n
Ist\u00e4llet f\u00f6r att beh\u00f6va specificera v\u00e4nster<\/strong>\/h\u00f6ger<\/strong>, det f\u00f6redragna s\u00e4ttet att justera text anv\u00e4nder v\u00e4rdena Start<\/strong> och slutet<\/strong>.  Detta anger om texten ska radas upp i b\u00f6rjan av varje rad eller slutet.  P\u00e5 spr\u00e5k fr\u00e5n v\u00e4nster till h\u00f6ger, Start<\/strong> \u00e4r ekvivalent med v\u00e4nster<\/strong>.  P\u00e5 ett h\u00f6ger-till-v\u00e4nster-spr\u00e5k b\u00f6rjar texten till h\u00f6ger och slutar till v\u00e4nster.<\/p>\n
\n<\/figure>\n
Anv\u00e4nder sig av Start<\/strong> eller slutet<\/strong> betyder att justeringen \u00e4r konsekvent, oavsett textriktning.<\/p>\n
<\/span>  Hur element \u00e4rver egenskapen f\u00f6r textjustering<\/span><\/h2>\n
Du b\u00f6r vara medveten om att textjustera<\/strong> egendom \u00e4rver.  Till exempel, om du st\u00e4ller in den p\u00e5 kropp<\/strong> element, kommer det att g\u00e4lla f\u00f6r varje element p\u00e5 sidan.  Du kan naturligtvis \u00e5sidos\u00e4tta det p\u00e5 vilket element som helst.<\/p>\n
<\/span>  Anv\u00e4nda egenskapen f\u00f6r textjustering f\u00f6r att styra layout<\/span><\/h2>\n
Du kan anv\u00e4nda textjustera<\/strong> CSS-egenskap f\u00f6r att definiera hur webbl\u00e4sare l\u00e4gger ut text horisontellt.  De vanligaste v\u00e4rdena \u00e4r v\u00e4nster<\/strong>, h\u00f6ger<\/strong>, Centrum<\/strong>, och r\u00e4ttf\u00e4rdiga<\/strong>.  Dessa \u00e4r dock ganska enkla r\u00e4ttf\u00e4rdiga<\/strong> introducerar viss komplexitet.<\/p>\n
Du b\u00f6r anv\u00e4nda textjustering sparsamt.  P\u00e5 skyltar och affischer kan centraljustering vara l\u00e4mplig, men det kan g\u00f6ra l\u00e4ngre textblock sv\u00e5ra att l\u00e4sa.  Motiveringen \u00e4r vanligtvis mer l\u00e4sbar n\u00e4r textraderna \u00e4r l\u00e4ngre.  Att motivera korta kolumner med text kan skapa fula mellanrum.<\/p>\n
De textjustera<\/strong> egenskapen \u00e4r en av m\u00e5nga CSS-egenskaper som ger anv\u00e4ndbar formatering och grundl\u00e4ggande positionering.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Bobby Jack (65 artiklar publicerade)
<\/strong><\/p>\n
Bobby \u00e4r en teknikentusiast som arbetat som mjukvaruutvecklare under de flesta av tv\u00e5 decennier.  Han brinner f\u00f6r spel, arbetar som chefredakt\u00f6r p\u00e5 Switch Player Magazine och \u00e4r f\u00f6rdjupad i alla aspekter av onlinepublicering och webbutveckling.<\/p>\n
                            Mer fr\u00e5n Bobby Jack<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n