Stel dat ik een <div>
heb die ik wil centreren in de browser's display (viewport). Om dat te doen moet ik de breedte en hoogte van het <div>
element berekenen.
Wat moet ik gebruiken? Graag ook informatie over browser compatibiliteit.
NOOT: dit antwoord is geschreven in 2008. Op dat moment was de beste cross-browser oplossing voor de meeste mensen echt om jQuery te gebruiken. Ik'laat het antwoord hier voor het nageslacht en, als u'jQuery gebruikt, is dit een goede manier om het te doen. Als u're een ander kader of zuivere JavaScript gebruikt, is het aanvaarde antwoord waarschijnlijk de te volgen weg.
Vanaf jQuery 1.2.6 kun je een van de kern CSS functies gebruiken, height
en width
(of outerHeight
en outerWidth
, al naar gelang het geval).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
element.offsetWidth en element.offsetHeight zouden moeten volstaan, zoals voorgesteld in vorig bericht.
Echter, als je alleen de inhoud wilt centreren, is er een betere manier om dat te doen. Ervan uitgaande dat je xhtml strict DOCTYPE gebruikt. zet de margin:0,auto eigenschap en de vereiste breedte in px op de body tag. De inhoud wordt gecentreerd uitgelijnd op de pagina.