Lad os antage, at jeg har en <div>
, som jeg ønsker at centrere i browserens visning (viewport). For at gøre det skal jeg beregne bredden og højden af <div>
-elementet.
Hvad skal jeg bruge? Medtag venligst oplysninger om browserkompatibilitet.
BEMÆRK: Dette svar blev skrevet i 2008. På det tidspunkt var den bedste løsning på tværs af browsere for de fleste mennesker virkelig at bruge jQuery. Jeg lader svaret stå her for eftertiden, og hvis du bruger jQuery, er dette en god måde at gøre det på. Hvis du bruger en anden ramme eller ren JavaScript, er det accepterede svar nok den rigtige vej at gå.
Fra og med jQuery 1.2.6 kan du bruge en af de centrale CSS-funktioner, height
og width
(eller outerHeight
og outerWidth
, alt efter hvad der er relevant).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
element.offsetWidth og element.offsetHeight burde være tilstrækkeligt, som foreslået i det tidligere indlæg.
Men hvis du bare vil centrere indholdet, er der en bedre måde at gøre det på. Hvis du antager, at du bruger xhtml strict DOCTYPE. sæt margin:0,auto egenskaben og den krævede bredde i px til body tagget. Indholdet bliver centreret på siden.