Textjustera - CSS-tricks

Anonim

Den text-alignegenskap i CSS används för inriktning av inre innehållet i ett blockelement.

p ( text-align: center; )

Dessa är de traditionella värdena för textjustering:

  • left- Standardvärdet. Innehållet justeras längs vänster sida.
  • right - Innehållet justeras längs höger sida.
  • center- Innehållscenter mellan vänster och höger kant. Vitt utrymme på vänster och höger sida av varje linje bör vara lika.
  • justify - Innehållsutrymmen så att så många block passar in på en rad som möjligt och det första ordet på den raden är längst till vänster och det sista ordet längs höger kant.
  • inherit - Värdet kommer att vara vad föräldraelementet är.

"Innehåll" används här som term istället för "text", för medan textjustering verkligen påverkar text, påverkar det alla inbyggda eller inline-blockelement i den behållaren.

Det finns också två nya värden i CSS3, start och slut. Dessa värden underlättar stöd för flera språk. Engelska är till exempel ett språk från vänster till höger (ltr) och arabiska är ett språk från höger till vänster (rtl). Att använda “höger” och “vänster” för värden är för stel och anpassar sig inte när riktningen ändras. Dessa nya värden anpassar sig:

  • start - Samma som "vänster" i ltr, samma som "höger" i rtl.
  • end - Samma som "höger" i ltr, samma som "vänster" i rtl.

Det finns också match-parent, som liknar inherit, bara att det nya värdet beräknas mot det aktuella elementets riktning istället för att du inte gör det.

Det finns några saker i specifikationen som inte har något webbläsarstöd än. Det ena är värdet "start slut" som skulle rikta in den första raden som om den var "start" och eventuella efterföljande rader som om den var "slut". En annan ger värdet en sträng, som text-align: "." start;texten kommer att ligga längs den första förekomsten av det, som för att rada upp en kolumn med siffror längs en decimal.

Exempel

Denna text är vänsterjusterad.

Denna text är högerjusterad.

Jag är centrerad!

Jag är berättigad. Jag fyller utrymmet exakt (utom på sista raden), även om jag ibland måste sträcka mig lite.

Jag ärver anpassningen av min förälder. I det här fallet betyder det vänster.

Webbläsarstöd

För vänster, höger, mitt, motivera:

Krom Safari Firefox Opera IE Android iOS
Några Några Några 3,5+ 3+ Några Några

För startoch endvärdena:

Krom Safari Firefox Opera IE Android iOS
Några 3.1+ 3.6+ Ingen Ingen Några Några