绝对中心*以上* div，具有不同大小的内容

Question

我有这个脚本： http : //jsfiddle.net/ZhXf5/3/

当您将鼠标悬停在其中一个框上时，“ popup” div将位于具有不同尺寸图像的框上方。 如何使这些尺寸不同的图像居中于div上方？

Answer 1

加载图像后，您需要做一些数学运算才能正确放置缩略图（ 已更新jsfiddle ）：

$("document").ready(function () {

    $("div.box").hover(function() {

        var positionleft = $(this).position().left + $(this).outerWidth() / 2;
        var positiontop = $(this).position().top;

        var img = $("<img src='"+$(this).text()+"' />");
        $("div.popup div.image").html(img);

        img.load(function() {
            $("div.popup").css({
                display: 'block',
                left: positionleft - (img.outerWidth() / 2),
                top: positiontop - img.outerHeight() - 20,
            });   
        });
    });   

});​