Anta at jeg har et <div>
som jeg ønsker å sentrere i nettleserens visning (viewport). For å gjøre det må jeg beregne bredden og høyden på <div>
-elementet.
Hva skal jeg bruke? Ta med informasjon om nettleserkompatibilitet.
BEMERK: Dette svaret ble skrevet i 2008. På den tiden var den beste løsningen på tvers av nettlesere for de fleste å bruke jQuery. Jeg legger igjen svaret her for ettertiden, og hvis du bruker jQuery, er dette en god måte å gjøre det på. Hvis du bruker et annet rammeverk eller ren JavaScript, er det aksepterte svaret sannsynligvis veien å gå .
Fra og med jQuery 1.2.6 kan du bruke en av de sentrale CSS-funksjonene, height
og width
(eller outerHeight
og outerWidth
, alt etter hva som passer).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
element.offsetWidth og element.offsetHeight bør gjøre, som foreslått i forrige innlegg.
Men hvis du bare vil sentrere innholdet, er det en bedre måte å gjøre det på. Forutsatt at du bruker xhtml strict DOCTYPE. angi egenskapen margin:0,auto og ønsket bredde i px til body-taggen. Innholdet blir midtstilt på siden.