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.
Centreret tekst er det nemmeste at lave. Man bruger blot CSS-egenskaben
text-align:center;
på den omgivende blok, så bliver teksten
automatisk centreret.
Følgende kasse har text-align:center;
sat:
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.
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.
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.
En blok (for eksempel et div
-element) kan centreres på flere forskellige måder.
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.
Følgende er lavet med koden:
<div class="context" style="text-align:center">
<div class="content" style="margin:0px auto;text-align:left">
...
Man skal huske text-align:left
på det centrerede element, ellers arver det tekst-centreringen fra omgivelserne
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.
Følgende er lavet med koden:
<div class="context">
<div class="content" style="position:absolute;left:40px;right:40px;width:auto;">
...
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.
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.
Det virker kun at sætte de lodrette marginer til auto
hvis
elementet er absolut placeret. Ellers virker lodret centrering lige som vandret.
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.
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.
Lodret og vandret centrering med negativ margin. CSS-koden er:
position:absolute;left:50%;margin-left:-51px;top:50%;margin-top:-51px;
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.