Centrering

For mange er centrering den hellige gral inden for webdesign. Hvis man følger med i nyhedsgruppen dk.edb.internet.webdesign.html, så er det et af de oftest stillede spørgsmål: "Hvordan centrerer jeg ...?".

Svaret afhænger af hvad man ønsker at centrere, og om det er vandret eller lodret det skal centreres. Her følger nogle af de metoder der kan bruges.

Vandret centrering af tekst

Centreret tekst er det nemmeste at lave. Man bruger blot CSS-egenskaben text-align:center; på den omgivende blok, så bliver teksten automatisk centreret.

Eksempel

Følgende kasse har text-align:center; sat:

Dette er en tekst som er centreret. Her er et tvungent linjeskift:
Kort linje.
Dette er en længere linje som bliver ombrudt.

Vandret tekst-centrering virker kun på tekst og andre inline-elementer. I ældre versioner af Internet Explorer virker det dog også på blok-elementer, men det er en fejl.

Centrering af baggrundsbillede

Baggrundsbilleder er nemme at centrere.

Man kan placere et baggrundsbillede inden i sit element med CSS-koden background-position. Positionen opgives som to procenttal, for eksempel:
background-position: 25% 50%;

Hvis man giver den vandrette position som 50%, så bliver det punkt der er 50% af billedets bredde (altså centrum) placeret 50% inde i det element baggrunden hører til. Den er altså automatisk centreret.

Eksempel

Baggrundsbilleder placeret på position (0%,0%), (50%,0%) og (50%,50%). Koden er for eksempel:
background-image: url(PicA.png)
background-position: 50% 50%;
background-repeat: no-repeat;

eller den korte version:
background: url(PicA.png) 50% 50% no-repeat;

Hvis man ønsker at gentage baggrundsbilledet, så kan man ændre background-repeat-egenskaben. Her er tre eksempler med background-repeat sat til henholdsvis repeat-x, repeat-y og repeat:

Baggrundsbilledet, eller snarere baggrundsmønsteret, er stadig centreret.

Vandret centrering af blok

En blok (for eksempel et div-element) kan centreres på flere forskellige måder.

Centrering med margin:auto

En blok har som standard en bredde på 100%. For at centrere den skal den derfor have en mindre bredde. Man sætter så højre og venstre margin til "auto". Det vil gøre dem lige store og derved centrere blokken.

Den metode har en bagdel: Den virker ikke i version 5 af Internet Explorer. Til gengæld har den Internet Explorer også en anden fejl som man kan udnytte. Hvis man bruger CSS til at centrere tekst, så centrerer Internet Explorer også blok-elementer. Kombinerer man de to, så får man en centrering der virker i alle nyere browsere.

Eksempel

Følgende er lavet med koden:
<div class="context" style="text-align:center">
 <div class="content" style="margin:0px auto;text-align:left">
...

Indhold af den inderste div.

Man skal huske text-align:left på det centrerede element, ellers arver det tekst-centreringen fra omgivelserne

Centrering med left og right

På et absolut placeret element kan man bestemme afstanden til højre og venstre kant. Sætter man dem til det samme, så bliver elementet centreret. Man skal dog huske ikke at give elementet en bredde.

Dette virker desværre ikke korrekt i Internet Explorer, da den ændrer boksens bredde til kun lige at omkranse indholdet. Elementet er korrekt placeret, men ser ud til at sidde for langt til venstre da bredden er gjort kortere end den skulle være.

Eksempel

Følgende er lavet med koden:
<div class="context">
 <div class="content" style="position:absolute;left:40px;right:40px;width:auto;">
...

Indhold af den inderste div.

Centrering med negativ margin

Man kan give et element en negativ venstre-margin. Det "trækker" elementet til venstre. Hvis man kender elementets bredde, så kan man placere dets venstrekant midt på siden med position:absolute;left:50% og så give det en negativ margin på halvdelen af elementets bredde.

Eksempel

Her har den inderste blok fået følgende CSS på sig:
position:absolute;left:50%;margin-left:-51px
Elementets bredde er 102 pixels, da indholdet er 100 pixels og det har en en-pixels border på hver side.

Indhold af den inderste div.

Lodret centrering af blok

Det virker kun at sætte de lodrette marginer til auto hvis elementet er absolut placeret. Ellers virker lodret centrering lige som vandret.

Eksempel

Lodret og vandret centrering med margin:auto. Her bruges CSS'en:
position:absolute; left:0px; right:0px; top:0px; bottom:0px; margin:auto
Det virker dog ikke i Internet Explorer, og der er ingen lodret tekst-centrerings-fejl der kan udnyttes.

Indhold af den inderste div.

Lodret og vandret centrering med left, right, top og bottom. CSS-koden er:
position:absolute; left:40px; right:40px; top:60px; bottom:60px; width:auto; height:auto;
Lige som ved vandret centrering virker dette heller ikke i Internet Explorer.

Indhold af den inderste div.

Lodret og vandret centrering med negativ margin. CSS-koden er:
position:absolute;left:50%;margin-left:-51px;top:50%;margin-top:-51px;

Indhold af den inderste div.

Centrering i forhold til browservinduet

De foregående eksempler er alle centreret i forhold til et omgivende element med en fast højde og bredde. Hvis man vil centrere i forhold til hele browservinduet, så kan det give problemer.

Problemet er at det omgivende element så vil være body-elementet, og det har ikke nødvendigvis samme højde som browseren. Hvis det er længere, så kan man scrolle, og det er alligevel ikke muligt at centrere lodret. Hvis dokumentet er kortere end browserens højde, så vil lodret centrering blive i forhold til dokumentes højde, ikke browserens.

Et trick der virker i de fleste browsere er at sætte højden på både html- og body-elementerne til 100%. Det kan gøres med følgende CSS-deklarationer:

 html, body {height:100%;}

Herefter kan man bruge de ovenstående metoder til at centrere i forhold til body. Man skal, som altid, passe på at det man centrerer ikke er højere end det man forsøger at centrere det inde i, da indholdet så vil løbe ud over kanterne. På body er det specielt slemt, da indhold der løber ud over toppen ikke kan ses på nogen måde.


Lasse Reichstein Nielsen