De text-aligneigenschap in CSS wordt gebruikt voor het uitlijnen van de innerlijke inhoud van een blokelement.
p ( text-align: center; )Dit zijn de traditionele waarden voor tekstuitlijning:
left- De standaardwaarde. De inhoud wordt langs de linkerkant uitgelijnd.right- Inhoud wordt langs de rechterkant uitgelijnd.center- Inhoud centreert tussen de linker- en rechterrand. Witruimte aan de linker- en rechterkant van elke regel moet gelijk zijn.justify- Inhoud wordt zo gespaties dat zoveel mogelijk blokken op één regel passen en het eerste woord op die regel langs de linkerrand staat en het laatste woord langs de rechterrand.inherit- De waarde is wat het bovenliggende element is.
"Inhoud" wordt hier als term gebruikt in plaats van "tekst", omdat tekstuitlijning zeker invloed heeft op tekst, maar alle inline- of inline-blokelementen in die container.
Er zijn ook twee nieuwe waarden in CSS3, begin en einde. Deze waarden maken ondersteuning voor meerdere talen gemakkelijker. Engels is bijvoorbeeld een taal van links naar rechts (ltr) en Arabisch is een taal van rechts naar links (rtl). Het gebruik van "rechts" en "links" voor waarden is te rigide en past zich niet aan als de richting verandert. Deze nieuwe waarden passen zich aan:
start- Hetzelfde als "links" in ltr, hetzelfde als "rechts" in rtl.end- Zelfde als "rechts" in ltr, zelfde als "links" in rtl.
Er is ook match-parent, wat vergelijkbaar is met inherit, alleen dat de nieuwe waarde wordt berekend tegen de richting van het huidige element in plaats van, weet je, dat niet te doen.
Er zijn een paar dingen in de specificatie die nog geen browserondersteuning hebben. Een daarvan is de waarde "start end" die de eerste regel zou uitlijnen alsof het "start" was en alle volgende regels alsof het "end" was. Een andere manier is om de waarde een string te geven, zoals text-align: "." start;De tekst zal worden gealigneerd langs de eerste keer dat die voorkomt, zoals om een kolom met getallen langs een decimaalteken uit te lijnen.
Voorbeelden
Deze tekst is links uitgelijnd.
Deze tekst is rechts uitgelijnd.
Ik ben gecentreerd!
Ik ben terecht. Ik vul de ruimte precies in (behalve op de laatste regel), ook al moet ik af en toe een beetje rekken.
Ik erf de uitlijning van mijn ouder. In dit geval betekent dat links.
Browser-ondersteuning
Voor links, rechts, midden, uitvullen:
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder | Ieder | Ieder | 3.5+ | 3+ | Ieder | Ieder |
Voor de starten endwaarden:
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Ieder | 3.1+ | 3.6+ | Geen | Geen | Ieder | Ieder |