在網頁中,一些元素需要進行垂直居中,比如文本、圖片、甚至整個div容器。本文將介紹如何使用jQuery實現div垂直居中。
//首先,需要先獲取到div的高度和寬度 var divHeight = $('.myDiv').height(); var divWidth = $('.myDiv').width(); //然后,獲取窗口的高度和寬度 var windowHeight = $(window).height(); var windowWidth = $(window).width(); //計算出div距離窗口頂部和左邊的距離 var topDistance = (windowHeight - divHeight) / 2; var leftDistance = (windowWidth - divWidth) / 2; //將計算好的距離設置給div $('.myDiv').css('top', topDistance + 'px').css('left', leftDistance + 'px');
代碼解析:
第一步,使用jQuery方法獲取要進行垂直居中的div的高度和寬度。在這里,我們使用了class選擇器指定了具體的div。
接著,使用同樣的方法獲取瀏覽器窗口的高度和寬度。注意,這里我們使用了window對象而非class或ID選擇器。
第三步,利用以上獲取到的數據,計算出讓div垂直居中的距離。這里使用了簡單的算術運算(除以2)來實現。
最后,使用CSS方法將距離設置給具體的div元素,完成垂直居中效果。
下一篇從哪里找好看的css