Elementet center er
utdatert, og har for lenge siden blitt erstattet med
nyere begrep. Et utdatert element støttes fremdeles i nettleserne, men bare for bakoverkompatibilitet. Sjansene er store
for at slike element senere utgår, uten noen form for
definisjon i spesifikasjonene eller nettleserstøtte. I denne artikkelen vil de nyere metodene for sentrering bli
gjennomgått.
En måte som ofte er brukt, er tilsettelse av
align="center" i
p eller i andre element som
inneholder tekst eller bilder. Dette er også en delvis utdatert metode, som har blitt erstattet av
CSS-egenskapen
text-align.
Men, her er det også noen unntak ute og går. Det finnes nemlig flere versjoner av
HTML, såkalte
DOCTYPE-deklarasjoner,
som forteller hvordan nettleseren skal tolke dokumentet.
«Strict» er den doctypen som anbefales av
W3C, og inneholder færre
HTML-attributer
enn «Transitional». Noen opplever Strict som
en strengere og vanskeligere doctype enn Transitional, siden det er nødvendig å bruke
CSS på steder man tidligere skrev attributer rett inn i
HTML-taggene. Dette
bør dog ikke by på noen problemer, hvis man er innstilt på å få en ryddig kode med all
CSS adskilt i et eget dokument.
align er blant
attributene som valideres i Transitional, men ikke i Strict.
For å sentrere tekst, bilder eller annet inline-innhold,
legges text-align: center; til det
elementet som innholdet står innenfor. I eksemplet nedenfor vil tekst innenfor et bestemt avsnitt bli sentrert.
p {
text-align: center;
}
<p>
Denne teksten står midt inne i avsnittet.<br>
Det gjør også denne!
</p>
Siden text-align bare gjelder for
inline-innhold, brukes det en annen metode for å få blokkelement
stående midt på siden. Blokkelement tar vanligvis opp all tilgjengelig plass i bredden, så det må angis
width for å få noe resultat. For å få
elementet til å ha lik margin til høyre og venstre side, bruker vi
CSS-egenskapen
margin med verdien auto.
p.blokktekst {
width: 300px;
margin: 0 auto;
}
Når det er oppgitt 2 verdier etter margin,
gjelder den første verdien for de begge vertikale sidene, og den andre verdien for de begge horisontale.
<p class="blokktekst">
Denne teksten står inne i en boks som står midt på siden.<br>
Og er venstrejustert inne i boksen!
</p>
Denne metoden kan brukes til å sentrere et bilde også, ved å angi at bildet skal oppføre seg som et blokkelement ved hjelp av
CSS-egenskapen
display.
img.blokk {
display: block;
margin: 0 auto;
}
<img class="blokk" src="..." alt="...">
Flere har problemer med å få denne metoden til å funke i Internet Explorer 6, på grunn av en feil DOCTYPE-deklarasjon. For at den skal aktiveres i Internet Explorer, må den plasseres helt øverst i dokumentet, uten tegn eller mellomrom over seg. For noen DOCTYPE-deklarasjoner kreves det i tillegg en URI, for at nettleseren ikke skal gå i «quirk-mode». En oversikt over hvordan DOCTYPE-deklarasjonene skal se ut er alltid nyttig å ha.
Internet Explorer 5 for Windows klarer ikke svare på denne metoden, og boksen/bildet vil ikke bli sentrert likevel. En svakhet til nettleseren, men ikke til metoden.
Det finnes en omvei, som kan tas for å få den til å virke i eldre nettlesere også.
text-align: center; vil nemlig i tillegg
til å sentrere tekst, også sentrere blokkelement i den gjeldende nettleseren; men her er det også en bakdel. Alle element
innenfor elementet med den angitte verdien, arver den samme egenskapen og vil sentrere tekst som vi i utgangspunktet ikke
vil ha sentrert. Dette fører til at det må legges til
text-align: left; i de elementene vi
ikke vil ha sentrert tekst.
body {
text-align: center;
}
p.blokktekst {
width: 300px;
margin: 0 auto;
text-align: left;
}
<p class="blokktekst">
Denne teksten står inne i en boks som står midt på siden.<br>
Og er venstrejustert inne i boksen!
</p>