javascript - さまざまなサイズのコンテンツを含む絶対中心*上*div

Question

私はこのスクリプトを持っています：http： //jsfiddle.net/ZhXf5/3/

ボックスの1つにカーソルを合わせると、「ポップアップ」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,
            });   
        });
    });   

});​