css - CSS Image Viewer - 画面中央揃え

Question

以下の画像拡大・ビューアを使いたいのですが、拡大画像のポップアップを画面中央に表示させたいです。

http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger/

色々試しましたがだめでした…。

これに関するヘルプは大歓迎です。

Answer 1

これらの問題を解決するために、私は通常、JavaScript を使用して DOM にクエリを実行し、ウィンドウのサイズを調べます。次に使用します：

document.getElementById('popup').style.top = window_height - popup_height / 2;
document.getElementById('popup').style.left = window_width - popup_width / 2;

CSS でポップアップの位置を「absolute」に設定する必要があります。高さ（幅も同じ）を取得するには、次を使用します。

if (document.body.clientHeight) {
    window_height = document.body.clientHeight;
} else {
    window_height = window.innerHeight;
}

div に id がない場合でも、次のようにオブジェクト参照を JavaScript 関数に渡すことができます。

<div class='popup' onmouseover='javascript:openPopup(this);'> ... </div>

そして、近くのコードで：

function openPopup(element) {

    // Get window's height and width using the code above

    element.style.top  = window_height - popup_height / 2;
    element.style.left = window_width - popup_width / 2;

}

つまり、ID でオブジェクトを取得するために DOM を照会する代わりに、オブジェクトを JavaScript 関数に直接渡します。

Answer 2

..で修正された場合、このようにすることができます。

.popup { 位置: 絶対; 幅: 140px; 左マージン: -70px; 上: 0px; 左: 50%; }