CSS text-align egenskap

Definition och användning

text-align-attributet definierar textens horisontella justering inom elementet.

Egenskapen ställer in textjusteringen inom blockelement genom att specificera vilken punkt i radramet som är centrerad. Genom att tillåta användaragenten att justera avståndet mellan bokstäver och ord i radinnehållet kan värdet justify stödjas; olika användaragenter kan få olika resultat.

Se också:

CSS-lärbok:CSS text

HTML DOM referenshandbok:textAlign-attributet

Exempel

Ställ in textjusteringen för elementen h1, h2, h3:

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}

Prova själv

CSS-syntax

text-align: left|right|center|justera|initial|inherit;

Attributvärde

Värde Beskrivning
vänster Lägg upp texten till vänster. Standardvärde: bestämt av webbläsaren.
rätt placera texten till höger.
center placera texten i mitten.
justify uppnå effekten av justerad text.
inherit definiera att text-align-egenskapen ska ärva från föräldrelementet.

värdet justify

Den sista horisontella justeringsegenskapen är justify, och den medför några egna problem.

värdet justify kan justera båda ändarna av texten. I justerad text placeras de två ändarna av textraden på innerkanten av föräldrelementet. Därefter justeras mellanrummet mellan orden och bokstäverna så att varje rad har exakt samma längd. Du kanske har märkt att justerad text är mycket vanlig inom utskriftsområdet. Men i CSS måste man göra fler överväganden.

det är användargränssnittet (inte CSS) som ska bestämma hur justerad text sträcks för att fylla utrymmet mellan vänster och höger kant av föräldrelementet. Till exempel kan vissa webbläsare bara lägga till extra utrymme mellan ord, medan andra kan fördela det extra utrymmet mellan bokstäverna (men CSS-standarden specificerar särskilt att, om) letter-spacing-egenskapenAnge som en längdvärde, "användargränssnittet får inte öka eller minska utrymmet mellan tecken"). Vissa användargränssnitt kan också minska utrymmet mellan vissa rader, vilket gör texten mer packad. Alla dessa åtgärder påverkar elementets utseende och kan till och med ändra dess höjd, beroende på hur mycket användargränssnittets justeringsval påverkar textraderna.

CSS specificerar inte hur man hanterar bindestreck (anteckning 1). De flesta justerade texter använder bindestreck för att dela långa ord över två rader, vilket minskar mellanrummet mellan orden och förbättrar utseendet på textraden. Eftersom CSS inte definierar bindestrecksbeteendet, är det osannolikt att användargränssnittet automatiskt lägger till bindestreck. Därför ser justerad text i CSS inte lika bra ut som utskriven text, särskilt om elementet är för smalt för att få plats med bara några ord per rad. Det är naturligtvis möjligt att använda smala designelement, men var uppmärksam på de relaterade nackdelarna.

Anteckning 1:CSS specificerar inte hur man hanterar bindestreck eftersom olika språk har olika bindestrecksnormer. Standarden försöker inte förena sådana osäkerhetsfria regler, utan hoppar helt över detta problem.

Tekniska detaljer

Standardvärde: Om direction-egenskapen är ltr är standardvärdet left; om direction är rtl är det right.
Arvbarhet: ja
Version: CSS1
JavaScript-syntax: object.style.textAlign="right"

Fler exempel

Justera text
Detta exempel visar hur man justerar text.

Webbläsarstöd

Talen i tabellen anger den första webbläsare som fullständigt stöder egenskapen.

Chrome IE / Edge Firefox Safari Opera
1.0 3.0 1.0 1.0 3.5