jQuery UI Position - Div over Image Issue

Question

I have a table of images (each image is in it's own td), I have a div that contains operations that can be performed on an image. When I mouse over an image I display the div over the top of the image. I am using the jQuery UI Position plugin at the moment. I've written javascript that accomplishes this. Each image has an attribute named 'cam', so I use a selector to hook up the mouseover event. The div with the commands in it has the id 'dvCamControl'.

The problem is I can't seem to get the div to center over the image.

Code:

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

The img looks like

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

The div centers vertically but not horizontally. Instead of being in the center of the image the div ends up way (way) to the left.

Answer 1

Thanks to Steve Wellens I figured out the issue. I used JSFiddle to recreate the issue, and in the process solved the problem.

The problem was the div I was centering did not have a fixed width, so it defaulted to 100%. My controls in the div were left aligning making it hard to tell that the code was working correctly. Once I specified a width on the div everything was fine.

For reference: http://jsfiddle.net/C4HfL/4/