Gör saker i linje med egenskapen CSS Text Align

Gör saker i linje med egenskapen CSS Text Align

En av de första funktionerna som alla utvecklare lärde sig om när de tog tag i ordbehandlingen var textjustering. Det lilla verktyget har varit avgörande för både professionella uppsättare och amatördesigners. Det är ingen överraskning att CSS har stöd för textjustering när det gäller webbdesign.





De textjustera egenskap, tillsammans med en eller två andra, styr hur ett element horisontellt justerar sin text. Utöver grunderna implementerar webbläsare långsamt fler av specifikationerna, men fullt stöd varierar. Lär dig hur du justerar text och vilka funktioner som de vanliga webbläsarna stöder idag.





Grunderna i egenskapen för textjustering av CSS

Justering är en av de mest kända typografiska termerna. I samband med CSS, textjustera avser horisontell inriktning.





Horisontell textjustering gäller endast för blockbehållare. Dessa är element i full bredd som stycken och div. Använda textjustera egendom på ett inline -element som t.ex. i kommer inte att ha någon effekt. Du kan också justera listobjekt och tabellceller:

anledningar till att sociala medier är dåliga

Som standard, på ett språk från vänster till höger (mer av detta senare), justeras texten till vänster:



I CSS är det samma som:

p { text-align: left; }

Eller:





p { text-align: start; }

Relaterad: Vad är Cascading Style Sheets och vad används CSS för?

Du kan använda andra värden för textjustera egenskap för att ändra horisontell inriktning. De vanligaste värdena är bekanta från ordbehandlingsappar:





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

Använd motiveringen för att justera vänster och höger kant

Ett annat gemensamt värde för textjustera är rättfärdiga . Webbläsare lägger till utrymme i motiverad text så att varje rad sträcker sig för att fylla det tillgängliga utrymmet:

När du motiverar text kan den sista raden vara knepig. Eftersom det kan vara väldigt kort (möjligen bara ett enda ord) kan avståndet över hela bredden vara fult. Som standard kommer även motiverad text att justera den sista raden till vänster.

hur man installerar om windows från usb

Ibland kanske du vill ha en annan effekt. Webbläsarimplementeringar kommer ikapp med specifikationen, men två tillvägagångssätt är möjliga.

De motivera-allt värde bör innebära att webbläsare behandlar den sista raden som alla andra och sträcker den till hela bredden. Men i skrivande stund stöder ingen webbläsare detta värde. Du kan kolla om de gör det när du läser den här artikeln.

En annan CSS -egendom, text-align-last , är mer flexibel och har bättre stöd. Du kan behandla det mer eller mindre på samma sätt som textjustera , men det gäller bara den sista raden:

Webbläsarstöd för den här egenskapen är bättre, men inte perfekt. På nytt, kontrollera innan du använder den . Om en webbläsare inte känner igen den här egenskapen ignoreras den.

Textjustering och läseriktning

Du kanske arbetar med ett språk, till exempel arabiska eller hebreiska, som läser från höger till vänster. CSS använder riktning egenskap för att ange detta, till exempel:

direction: rtl;

Dessa språk justerar vanligtvis text till höger som standard.

Istället för att behöva ange vänster / höger , det föredragna sättet att justera text använder värdena Start och slutet . Detta anger om texten ska radas upp i början av varje rad eller slutet. På vänster till höger språk, Start är ekvivalent med vänster . På ett språk från höger till vänster börjar texten till höger och slutar till vänster.

server -ip -adress kunde inte hittas.

Använder sig av Start eller slutet betyder att, oavsett textriktning, är inriktningen konsekvent.

Hur element ärver den textjusterade egenskapen

Du bör vara medveten om att textjustera egendom ärver. Om du till exempel anger det på kropp element, gäller det för varje element på sidan. Du kan naturligtvis åsidosätta det på alla element.

Använda text-align-egenskapen för att styra layout

Du kan använda textjustera CSS -egenskap för att definiera hur webbläsare lägger upp text horisontellt. De vanligaste värdena är vänster , höger , Centrum , och rättfärdiga . Dessa är dock ganska okomplicerade rättfärdiga introducerar viss komplexitet.

Du bör använda textjustering sparsamt. På skyltar och affischer kan centraljustering vara lämplig, men det kan göra längre textblock svårt att läsa. Motivering är vanligtvis mer läsbar när textrader är längre. Att motivera korta kolumner med text kan skapa fula avstånd.

De textjustera egenskap är en av många CSS -egenskaper som ger användbar formatering och grundläggande positionering.

Dela med sig Dela med sig Tweet E-post 10 enkla CSS -kodexempel du kan lära dig på 10 minuter

Behöver du hjälp med CSS? Prova dessa grundläggande CSS -kodexempel till att börja med och applicera dem sedan på dina egna webbsidor.

Läs Nästa
Relaterade ämnen
  • Programmering
  • Webbutveckling
  • Webbdesign
  • CSS
Om författaren Bobby Jack(58 artiklar publicerade)

Bobby är en teknikentusiast som arbetade som mjukvaruutvecklare i de flesta av två decennier. Han brinner för spel, jobbar som Recensions Editor på Switch Player Magazine och är fördjupad i alla aspekter av online -publicering och webbutveckling.

Mer från Bobby Jack

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera