Oletetaan, että minulla on <div>
, jonka haluan keskittää selaimen näytössä (viewport). Tätä varten minun on laskettava <div>
-elementin leveys ja korkeus.
Mitä minun pitäisi käyttää? Liitä mukaan tietoja selainyhteensopivuudesta.
HUOMAUTUS: Tämä vastaus on kirjoitettu vuonna 2008. Tuolloin paras selaintenvälinen ratkaisu useimmille ihmisille oli jQueryn käyttö. Jätän vastauksen tänne jälkipolville, ja jos käytät jQuerya, tämä on hyvä tapa tehdä se. Jos käytät jotakin muuta kehystä tai pelkkää JavaScriptiä, hyväksytty vastaus on luultavasti oikea tapa toimia.
JQueryn versiosta 1.2.6 lähtien voit käyttää yhtä CSS:n ydinfunktioista, height
ja width
(tai outerHeight
ja outerWidth
, tarpeen mukaan).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
element.offsetWidth ja element.offsetHeight pitäisi riittää, kuten edellisessä viestissä ehdotettiin.
Jos kuitenkin haluat vain keskittää sisällön, siihen on parempi tapa. Olettaen, että käytät xhtml strict DOCTYPE. aseta body-tunnisteelle margin:0,auto -ominaisuus ja vaadittu leveys px:nä. Sisältö kohdistetaan keskelle sivua.