Når man skal centrerer blokelementer som DIV, P, UL osv, er den korrekte løsning at sætte en bredde (width) og margin: 0 auto; dette vil centrere elementet i forhold til brugerens synsfelt:
|
1 2 3 4 |
#sideContainer{ width:760px; margin: 0 auto; } |
Ovenstående kode vil centrere HTML elementet med IDet #sideContainer i alle moderne browsere, men ønsker man support for ældre browsere som IE5/IE5.5 er det nødvendigt at ændre taktik. Ældre versioner af IE kører permanent i Quirksmode, hvilket betyder at CSS ikke tolkes i overensstemmelse med standarderne. Dette betyder bl.a. at blokelementer håndteres som inline elementer. For at omgå dette problem anvendes nedenstående kode:
|
1 2 3 4 5 6 7 8 |
body { text-align:center; /* IE5 */ } #sideContainer { text-align:left; width:760px; margin: 0 auto; } |
I ovenstående kode sættes text til at aligne center i body, hvilket centrerer alle inline elementer (inkl blokelementer i IE5.X). For at omgå at elementer i #sideContainer ikke skal centreres også sættes text-align til left igen (som er standard normalt).
