javascript - jQuery UI Position - Div over Image 问题

Question

我有一个图像表(每个图像都在它自己的 td 中)，我有一个包含可以对图像执行的操作的 div。当我将鼠标悬停在图像上时，我会在图像顶部显示 div。我目前正在使用 jQuery UI Position 插件。我已经编写了实现此目的的 javascript。每个图像都有一个名为“cam”的属性，所以我使用一个选择器来连接鼠标悬停事件。包含命令的 div 的 ID 为“dvCamControl”。

问题是我似乎无法让 div 以图像为中心。

代码:

        $('[cam]')
            .mouseover(function() {               
                $('#dvCamControl')
                    .show()
                    .position({ my: "center", at: "center", of: $(this), collision: 'none'});
            });

img 看起来像

<IMG style="WIDTH: 300px" alt="img" src="img" cam="img1">

div 垂直居中，但不是水平居中。 div 不是位于图像的中心，而是向左(向左)结束。

Answer 1

感谢 Steve Wellens，我解决了这个问题。我使用 JSFiddle 重现了问题，并在此过程中解决了问题。

问题是我居中的 div 没有固定宽度，所以它默认为 100%。我在 div 中的控件保持对齐，因此很难判断代码是否正常工作。一旦我在 div 上指定了宽度，一切都很好。

供引用:http://jsfiddle.net/C4HfL/4/