Centrering
Centrering | Horizontal - JavaScript(IEmarginFix) | Horisontal - CSS (MSIE hack) | Horisontal og Vertikal - CSS og JS | Horisontal og Vertikal - CSS2. september 2002
Rettet en fejl i udregning af negativ margin i Horisontal og Vertikal - CSS samt tilføjet resize kode til opera i Horisontal og Vertikal - CSS og JS.
Centrering
Jeg har lavet nogle eksempler på hvordan man centrere et element på en side,
horisontalt og vertikalt.
De forskellige metoder er beskrevet, hvilke browsere supportere de, der er fordele og ulemper og et eksempel til hver.
Note:Har du en browser, hvor scriptet afviger fra nedenstående, så send mig venligst en e-mail med browser, version samt OS (evt. om du har javascript slået til/fra).
Oversigt
| Browser | IE 5 (win) | IE 6 (win) | IE 5 (mac) | Safari (mac) | Netscape 4 | Mozilla 1.0 | Opera 6 | Opera 7 | |||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Oversigt over centrerings metoder. | |||||||||||
| Horisontal | |||||||||||
| CSS (W3C) | Nej | Ja | Ja | Ja | Nej | Ja | Ja | Ja | |||
| CSS (MSIE hack) | Ja | Ja | Ja | Ja | Nej | Ja | Ja | Ja | |||
| JS (IEmarginFix) | Ja | Ja | Ja | Ja | Nej | Ja | Ja | Ja | |||
| Horisontal og Vertikal | |||||||||||
| CSS og JS | Ja | Ja | Ja | Ja | Nej | Ja | Ukorrekt | Ja | |||
| CSS | Ja | Ja | Ukorrekt | Ukorrekt | Nej | Ja | Ukorrekt | Ja | |||
Horisontal - CSS (W3C)
Her er W3C måden at centrere et element.
- Ulempen Virker ikke i MSIE5 og MSIE5.5
- Fordelen er at det virker uden javascript
Eksempel: Horisontal - CSS (W3C)
Horisontal - CSS (MSIE hack)
Internet Explorer understøtter ikke standard måden at centrere elementer på en side,
den benytter text-align:center;. text-align metoden kræver at man sætter den på
forældre elementet (ex. body elementet) til det element (ex. div element) man ønsker at centrere.
Det gør så at alle elementer i forældre elementet er centreret.
Hvilket er forkert efter W3C og samtidig ganske upraktisk.
Jeg har dog lavet et eksempel, Horisontal - CSS (MSIE hack), som benytter både margin-left:auto; margin-right:auto;
samtidig med Internet Explorers text-align:center;.
- Ulempen er at man benytter sig af et CSS hack
- Fordelen er at det virker uden javascript
Eksempel: Horisontal - CSS (MSIE hack)
Horisontal (IEmarginFix)
Eksempel på hvordan man horisontal centrere et div element midt på siden ved brug af W3C metoden,
margin-left:auto; og margin-right:auto;.
Margin metoden sættes på det element man ønsker at centrere.
Mozilla, Netscape 6+ og Opera 5+ forstår godt denne metode, men Internet Explorer understøtter den ikke.
Derfor er der lavet et javascript program
IEmarginFix
af David Schontzler som fixer dette for Internet Explorer.
- Ulempen er at det kræver Javascript
- Fordelen er at det slår igennem alle de steder man ønsker at centrere
Eksempel: Horisontal - CSS og JS (IEmarginFix)
Horisontal og Vertikal - CSS og JS
Eksemplet Horisontal og Vertikal - CSS og JS
sætter marginLeft og marginTop på et element.
Der er sat 2 eventhandlere på window. Onload og onresize kører begge
funktionen posCenter() som finder vidden på elmentet som skal centreres,
i dette eksempel er det div elementet med id'et center.
Den negative højde og vidde på elementet divideres med 2.
Disse to værdier sættes så til sidst på elmentet.
Ulempen er at det kræver at javascript er slået til.
- Ulempen er at det kræver javascript
- Fordelen tja...
Eksempel: Horisontal og Vertikal - CSS og JS
Horisontal og Vertikal - CSS
Jeg har også lavet eksemplet Horisontal og Vertikal - CSS
som kun ved hjælp af CSS, centrere et element horisontalt og vertikalt.
Det kræver dog at man kender helt præcis vidde og højde på elementet der skal centreres.
I stylesheet'et sætter man margin-left og margin-right
ved at tage den negative værdi af halvdelen af enten højden eller vidden plus padding og border.
- Fordelen er at det er lavet i ren css
- Ulempen er at det kræver at man kender den præcise vidde og højde
Eksempel: Horisontal og Vertikal - CSS