Autocentrering

Centrering af en webside i browservinduet beror i (næsten) alle tilfælde på, at alt websidens indhold indkapsles i en eller flere CSS-kasser, som er det eller de elementer, vi dernæst centrerer.

Der er forskellige metoder til centering, midtstilling, autocentrering eller hvad du nu fortrækker at kalde det. Jeg gennemgår disse i en håndfuld eksempler. På denne side gengiver jeg kun de vigtigste dele af de stylesheets, der knytter sig til de enkelte eksempler. Ønsker du at se stylesheet for hele eksempelsiden, må du bruge browserens Vis kilde funktion.

Autocentrering med lige brede marginer: Denne metode består meget enkelt i at give body-elementet en højre og venstre margin, der er lige store. Dette vil så at sige skubbe websidens indhold ind mod midten. Websidens bredde bliver elastisk, det vil sige den ændrer sig med browservinduets bredde. Marginernes bredde kan fastsættes med de mål, der passer dig og dit formål. Det mest populære er nok brugen af procenter, som i eksemplet:

body {
  margin:1em 5%;padding:0;
  font-family:georgia,arial,sans-serif;
  background-color:rgb(245,245,255);
  color:#000; }

Autocentrering med auto-marginer: Hvis din side har et overordnet element, der omfatter alt indhold på siden, og hvis dette element har en bredde, kan du fordele den overskydende plads ligeligt mellem venstre og højre side ved at sætte de repektive marginbredder til auto:

html, body {
  margin:0; padding:0;
  font-family:georgia,arial,sans-serif;
  background-color:rgb(245,245,255);
  color:#000; }
#page {
  width:45em;
  margin:1em auto;}

Du behøver strengt taget ikke et overordnet element, der omfatter alt på siden. Har du for eksempel et banner, en indholdsdel og en sidefod, kan du lave det samme trick på hver af disse.

Autocentrering med negativ margin: Her er tale om en lidt fiffig metode, hvor vi først flytter #side-elementet 50 procent ind på siden og dernæst sætter en negativ margin på det halve af elementets bredde. Derved centreres det midt på siden (midtstilling, er der nogle, der kalder det).

html, body {
  margin:0; padding:0;
  font-family:georgia,arial,sans-serif;
  background-color:rgb(245,245,255);
  color:#000; 
	}
#page {
  position:absolute;
  top:1em;
  left:50%;
  margin-left:-23.5em;
  width:45em;}

Hvis du vil sikre dig centrering også i Internet Explorer 5, er du nødt til at tilføje nogle ekstra formregler af hensyn til denne browser:

html, body {
  margin:0; padding:0;
  font-family:georgia,arial,sans-serif;
  background-color:rgb(245,245,255);
  color:#000; 
  text-align:center;	}
#page {
  position:absolute;
  top:1em;
  left:50%;
  margin-left:-23.5em;
  width:45em;
  text-align:left;}

Autocentrering både vandret og lodret

Lodret centrering har jo kun mening, hvis alt websidens indhold kan være inden for en højde på browservinduet på 440 pixel. (Det er indholdsrudens højde i et browservindue, der er maksimeret til at fylde hele arealet af en 800*600 pixel monitor. Ved 1024 * 768 er det tilsvarende mål 605 pixel.)

#page {
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-22.5em;
  width:45em;
  height:400px;
  margin-top:-200px;
  background:#dedede;
  border-width:1px 0 1px 1px;
  border-style:solid;
  overflow:auto;}

Det tilsiger os, at vi er nødt til at operere med absolutte mål på det indhold, der skal centreres. Eksemplet Autocentrering både vandret og lodret viser en sådan webside, der er lavet med det stylesheet, du ser herover

Du kan sikkert genkende teknikken fra websiden om Autocentrering med negativ margin. Indholdskassen div#page positioneres absolut med kassens overkant 50% af browservinduets højde fra browservinduets overkant og tilsvarende for kassens venstre kant. Dernæst gives indholdskassen en negativ margin-top på det halve af kassens højde og en negativ venstre margin på det halve af kassens bredde. “ Keine Hexerei, nur Behändigkeit”, som tryllekunstnerne siger.

Du bemærker sikkert i eksemplet (medmindre du har en meget stor monitor), at der er en lodret rulleskakt i indholdskassen, idet det indhold jeg har, fylder mere i højden end der er plads til inden for de 400 pixel. Denne rulleskakt fremkaldes af overflow-attributten, der er markeret med rødt i stylesheet-kildekoden.

Overflow-attributten

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

div.box {
  float:left;
  width:210px;
  height:50px;
  margin:10px 0;
  padding:5px 10px;
  background:#c8d8e8;
  border:1px solid #000;} 
div#ex1 {
  overflow:hidden;}
div#ex2 {
  clear:left;
  overflow:auto;} 

Herover til venstre ser du et par kasser med blå baggrund. Kasserne, der har det samme tekstmæssige indhold, er lavet med det stylesheet, du ser til højre for kasserne. Forskellen på de to kasser skyldes de værdier, jeg har givet overflow-attributten.

Denne attribut tager følgende værdier: visible, hidden, scroll, auto og inherit. I den øverste kasse er værdien hidden, i den nederste auto. Det vil føre for vidt her at gå i detaljer med de forskellige virkninger, der fremkommer ved brug af de forskellige værdier - især da browserunderstøttelsen og måden, hvorpå attributten fortolkes i de forskellige browsere, er en noget indviklet affære. Der er nok at vide, at værdien auto sætter en lodret rulleskakt, hvis indholdet er for meget til kassen (undtagen i Opera-browseren, der også sætter en vandret rulleskakt), samt at værdien hidden skal bruges, hvis du ikke ønsker det overskydende indhold vist.

Til mit formål, nemlig at lave en webside, hvor alt indholdet er centreret, også lodret, kan jeg nøjes med at bruge overflow:auto. Det er værd at bemærke, at jeg skal have en absolut højde på kassen div#page, for at overflow-attributten kan gøre sit kunststykke.

Relativ bredde

Den absolutte højde på indholdskassen er ikke til at komme uden om, hvis du vil have lodret centrering. Men kan vi ikke lave det sådan, at indholdskassens bredde øges, hvis browservinduets bredde øges - altså ala det, jeg demonstrerede på websiden Autocentrering med relative marginer.

#page {
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-40%;
  width:80%;
  height:400px;
  margin-top:-200px;
  overflow:auto;
  background:#dedede;
  border-width:1px 0 1px 1px;
  border-style:solid;}

Jo, med lidt omtanke kan vi jo erstatte nogen af værdierne i stylesheet'et ovenfor, så vi får det stylesheet, der ses herover.

Eksemplet præsenteres på websiden Vandret og lodret centrering - relativ bredde.

Joe Gillespie http://www.wpdfd.com rapporterer, at Opera browseren har problemer med denne løsning. Jeg har ikke kunnet duplikere dette problem. Støder du på det, foreslår Gillespie en workaround på ovennævnte webadresse.

Konklusion

I denne har jeg givet forskellige CSS-løsninger på opgaven at centrere et element i browservinduets indholdsrude. Til vandret centrering foreslå jeg Centrering med automarginer, til både vandret og lodret centrering foreslår jeg brugen af en absolut højde på elementet og relativ bredde af elementet: Autocentrering både vandret og lodret – relativ bredde

Denne side er senest opdateret: February 24, 2006

Artikler om CSS-layout

Webdesign – illustreret håndbog

– er i løbet af kort tid slået igennem som grundbogen for dem, der ønsker at lære sig websidekonstruktion, og tillige ønsker at gøre det på en håndværksmæssig solid måde. Køb den hos forlaget Globe.

Online support

Hvis du bliver abonnent på mit nyhedsbrev får du øjeblikkelig e-mail opdatering i tilfælde af rettelser eller uddybende forklaringer til eksempler og beskrivelser mine bøger.

Samtidig får du også gennem disse nyhedsbreve besked om nye og opdaterede artikler på dette websted.

Du kan læse mere om denne sag på websiden Nyhedsbrev.