淘先锋技术网

首页 1 2 3 4 5 6 7

如何让一张图片在页面中水平居中或垂直居中是前端开发中经常遇到的问题,本篇文章主要讲解如何使用jQuery实现图片的水平居中。

// 获取图片宽度
var imgWidth = $('img').width();
// 获取浏览器宽度
var winWidth = $(window).width();
// 计算left值
var leftValue = (winWidth - imgWidth) / 2;
// 设置图片居中
$('img').css('left', leftValue);

代码解释:

第1行:使用jQuery选择器获取页面中的图片宽度。

第3行:使用jQuery选择器获取浏览器窗口宽度。

第5行:计算图片的左边距离浏览器窗口左侧的距离,公式为:(浏览器窗口宽度 - 图片宽度) / 2。

第7行:使用jQuery的css方法设置图片的左边距离浏览器窗口左侧的距离。

以上代码实现了图片的水平居中,如果要实现垂直居中,只需将imgWidth和winWidth替换为图片高度和浏览器窗口高度,再计算top值即可。