Jquery 带淡入效果的图像悬停-使其居中

有没有办法悬停一个图像并用另一个图像替换它而不使用绝对位置

现在，我的图像在

span（display:block；）

中居中，使用

文本对齐：居中这很好

我尝试了多种解决方案，将图像添加到文档中，并使用jQuery进行切换：

$("span.image_hover").hover(function() {
    $(this).find("img:not(.secondary)").stop(true, true).fadeOut();
    $(this).find("img.secondary").stop(true, true).fadeIn();
  }, function() {
    $(this).find("img:not(.secondary)").stop(true, true).fadeIn();
    $(this).find("img.secondary").stop(true, true).fadeOut();
  });

此解决方案的问题在于，它需要图像的绝对位置，因此会破坏中心位置-这是一个问题，因为网站响应速度快，在调整大小时，图像位于左侧，而不是屏幕（移动设备）的中心。图像是缩放的，仅使用其最大宽度（240px）

我是否可以在保持图像内联或居中的同时进行此转换

我想不出这些图片的URL。因此，在图像上附加_off/_on是不可能的。它们在服务器上生成，并作为变量发送给我，以便在文档中使用
 啊啊！可以通过将
最大宽度：240px
添加到
span.image\u悬停
中来修复此问题
 …只是想知道…图像是否包含在正常流中的包装器中，该包装器是绝对元素的子元素？。然后你可以把它放在中心。对不起，如果我没有抓住重点…请发布你的HTML和CSS。更好的是，一个正在工作的JSFIDLE示例如何？当我调整窗口大小时，我不知道图像的大小。适合的图像比例。：-）