Kapittel 3.5 - Justering av tekst

Selv om HTML inneholder støtte for justering av tekst, gjelder justeringen kun for paragraf flagg. Med andre ord er det ikke mulig å justere tekst som befinner seg i f.eks. <h1>-flagg uten å først plassere flagget på innsiden av et justert <p>-flagg:

<p align="right"> 
   <h1>Overskrift</h1> 
</p> 

I tillegg har CSS erstattet all justering av tekst fra HTML. Det vil si at en nettleser foretrekker at tekst justering skjer ved hjelp av CSS, ettersom nettlesere i fremtiden kan velge å støtte <p align="">, når align parameteren fjernes fra den offesielle HTML standarden i fremtiden.

CSS elementet text-align lar deg justere tekst til venstre, høyre, til midten eller balansert til begge sider.

<style> 
   p { text-align: right; } Justerer tekst til høyre 
   p { text-align: center; } Justerer tekst til midten 
   p { text-align: left; } Justerer tekst til venstre 
   p { text-align: justify; } Balanserer tekst til begge sider 
</style> 

CSS har i tillegg støtte for vertikal tekst justering, og erstatter dermed både HTML-flaggene <sup> og <sub> som gir henholdsvis hevet og senket tekst. I tillegg er det mulig å justere tekst slik at den er plassert enten på samme høyde, midt på eller på bunnen av det største elementet på samme linje.

<span style="font-size: 22pt;">CSS</span> 
<span style="vertical-align: top;">Tekst på høyde med største element på samme linje</span> 
<span style="font-size: 22pt;">CSS</span> 
<span style="vertical-align: middle;">Tekst midtstilt med det høyeste elemenetet på samme linje</span> 
<span style="font-size: 22pt;">CSS</span> 
<span style="vertical-align: bottom;">Tekst på bunnen med det høyeste elemenetet på samme linje</span> 

Som gir følgende resultat i en nettleser:

CSSTekst på høyde med det høyeste elemenetet på samme linje
CSSTekst midtstilt med det høyeste elemenetet på samme linje
CSSTekst på bunnen med det høyeste elemenetet på samme linje
Vertical-align elementet kan også produsere både hevet og senket tekst med henholdsvis parameterne super og sub (kort for superscript og subscript):

X<span style="vertical-align: super;">3</span> + y<span style="vertical-align: top;">6</span> = 82 

O<span style="vertical-align: sub;">2</span> (g) + 2 H<span style="vertical-align: sub;">2</span> (g) 
-> 2 H<span style="vertical-align: sub;">2</span>O (g)