CSS text-align eigenschap

Definitie en gebruik

De text-align eigenschap bepaalt de horizontale uitlijning van de tekst binnen een element.

Deze eigenschap stelt de horizontale uitlijning van de tekst binnen een blokelement in door te specificeren met welke punt de lijnbox wordt uitgelijnd. Door de gebruikersagent toe te staan om de afstand tussen letters en woorden in de lijninhoud aan te passen, kan de waarde justify worden ondersteund; verschillende gebruikersagents kunnen verschillende resultaten geven.

Zie ook:

CSS handleiding:CSS tekst

HTML DOM referentiehandleiding:textAlign eigenschap

Voorbeeld

Stel de tekstuitlijning van de h1, h2, h3-elementen in:

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

Probeer het zelf uit

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
left Plaats de tekst aan de linkerkant. Standaardwaarde: wordt bepaald door de browser.
right Plaats de tekst aan de rechterkant.
center Plaats de tekst in het midden.
justify Voert een bilateraal uitgelijnde teksteffect uit.
inherit Stelt dat de waarde van de text-align-eigenschap van het ouder-element moet worden overgenomen.

De waarde justify

De laatste horizontale uitlijningseigenschap is justify, die zijn eigen problemen met zich meebrengt.

De waarde justify zorgt ervoor dat beide uiteinden van de tekst uitgelijnd zijn. Bij bilateraal uitgelijnde teksten worden de linker- en rechterkanten van de tekstregels geplaatst aan de binnenzijden van het ouder-element. Vervolgens wordt de ruimte tussen woorden en letters aangepast zodat de lengte van alle regels gelijk is. U hebt mogelijk al opgemerkt dat bilateraal uitgelijnde tekst vaak wordt gebruikt in de drukindustrie. In CSS moet echter extra aandacht worden besteed.

Moet worden bepaald door de gebruikersagent (en niet door CSS) hoe bilateraal uitgelijnde tekst moet worden uitgerekt om de ruimte tussen de linker- en rechterrand van het ouder-element te vullen. Bijvoorbeeld, sommige browsers voegen mogelijk extra ruimte toe tussen woorden, terwijl andere browsers de extra ruimte tussen letters gelijkmatig verdelen (hoewel de CSS-specificatie specifiek opmerkt dat letter-spacing-eigenschapWordt gespecificeerd als een lengtewaarde ("de gebruikersagent mag de ruimte tussen karakters niet verder verhogen of verlagen")). Sommige gebruikersagents kunnen ook de ruimte van bepaalde regels verminderen, waardoor de tekst dichter bij elkaar komt. Alle deze methoden kunnen het uiterlijk van het element beïnvloeden, zelfs de hoogte, afhankelijk van hoeveel tekstregels het uitlijnkeuze van de gebruikersagent beïnvloedt.

CSS specificeert ook niet hoe hyphens moeten worden afgehandeld (opmerking 1). De meeste bilateraal uitgelijnde teksten gebruiken hyphens om lange woorden op te splitsen in twee regels, waardoor de ruimte tussen de woorden kleiner wordt en het uiterlijk van de tekstregels verbetert. Omdat CSS het hyphen-gedrag niet definieert, is het gebruikersagent niet waarschijnlijk om automatisch hyphens toe te voegen. Daarom ziet bilateraal uitgelijnde tekst er in CSS niet zo goed uit als afgedrukt, vooral als de elementen te smal zijn om maar een paar woorden per regel te kunnen plaatsen. Natuurlijk is het mogelijk om smalle ontwerpelementen te gebruiken, maar wees voorzichtig met de bijbehorende nadelen.

Opmerking 1:CSS specificeert niet hoe hyphens moeten worden afgehandeld, omdat verschillende talen verschillende hyphenregels hebben. De specificatie heeft niet geprobeerd om enkele waarschijnlijk onvolledige regels te verzoenen, maar heeft gewoon deze kwestie niet genoemd.

Technische details

Standaardwaarde: Als de direction-eigenschap ltr is, is de standaardwaarde links; als direction rtl is, dan is het rechts.
Inheritantie: ja
Versie: CSS1
JavaScript syntax: object.style.textAlign="right"

Meer voorbeelden

Tekst uitlijnen
Dit voorbeeld demonstreert hoe tekst uitgelijnd kan worden.

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die de eigenschap volledig ondersteunt.

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