Supponiamo che io abbia un <div>
che desidero centrare nel display (viewport) del browser. Per farlo, ho bisogno di calcolare la larghezza e l'altezza dell'elemento <div>
.
Cosa dovrei usare? Si prega di includere informazioni sulla compatibilità del browser.
NOTA: *questa risposta è stata scritta nel 2008. All'epoca la migliore soluzione cross-browser per la maggior parte delle persone era davvero quella di usare jQuery. Sto lasciando la risposta qui per i posteri e, se stai usando jQuery, questo è un buon modo per farlo. Se stai usando qualche altro framework o JavaScript puro, la risposta accettata è probabilmente la via da seguire.
A partire da jQuery 1.2.6 puoi usare una delle funzioni di base CSS, height
e width
(o outerHeight
e outerWidth
, come appropriato).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
element.offsetWidth e element.offsetHeight dovrebbero andare bene, come suggerito nel post precedente.
Tuttavia, se vuoi solo centrare il contenuto, c'è un modo migliore per farlo. Supponendo che tu usi xhtml strict DOCTYPE. imposta la proprietà margin:0,auto e la larghezza richiesta in px al tag body. Il contenuto viene allineato al centro della pagina.