@codenerd på twitter Mit seneste tweet:

CSS: Centrering af blokelementer

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:

PHP
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:

PHP
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).

 

Skriv en kommentar

Krævede felter er markeret med *.

*