1

特定の高さと特定の幅を持つdivボックスを、特定の高さと特定の幅を持つ画面の中央に配置しようとしています。

幅と高さはJavaScriptで検出されます。私はより良いプログラマーになりたいと思っています。数学とプログラミングは必ずしも私の最高の特徴ではありません。除算とパーセント修正を行う必要があることはわかっていますが、ポインターが必要です。

<script type="text/javascript">

var w=document.width;
var h=document.height;

var img_w=200;
var img_h=300;

var css=;

/*

Example

w=600;
h=400;

img_w=200;
img h=300;


therefore css will be

position:absolute;
top:150px;
left:100px;
right:100px;
bottom:100px;

see my image.

*/

document.writeln(css);
</script>

ここに画像の説明を入力してください

したがって、基本的に、img_wおよびimg_hが何であれ、ボックスは中央にマージンを置いて配置する必要があります。

4

5 に答える 5

3

あなたが探している式は次のとおりです：

left = ( width - img_width ) / 2
top = ( height - img_height ) / 2

PS：あなたの例では、あなたは逆さまhになりwました。

于 2012-12-06T11:43:13.043 に答える
2

別のアプローチを提案させてください。

CSSは手続き型ではなく、宣言型言語です。ブラウザに計算を任せて、を使用しますmargin: auto。これはあなたが探しているものではないことを理解していますが、CSSはまさにそれです。

例については、 http：//jsfiddle.net/th43T/を参照してください。

于 2012-12-06T11:47:31.540 に答える
0

私は最初に数学が（他の人が指摘したように）だと思いました

計算は次のとおりです。（全幅-画像幅）/2。高さについても同じです。

しかし、なぜあなたの例では上150pxと下100pxなのですか？

于 2012-12-06T11:44:58.800 に答える
0 
Block css:{
    left: 50%;
    top: 50%;
}

JS (useing jQuery): {
    block.css({
        'margin-left': '-' + (block.outerWidth() / 2), // margin-left: -1/2 of block width
        'margin-top': '-' + (block.outerHeight() / 2), // margin-top: -1/2 of block height
    })
}
于 2012-12-06T11:46:53.230 に答える
0

ウィンドウのサイズ変更中に中央に配置する必要がある場合は、ウィンドウのサイズ変更イベントも確認する必要があります。

私はこのjsfiddleを作成しました：http：//jsfiddle.net/ekRff/1/

javascript：

function updateBoxPosition($box) {
    var window_width = $(window).width();
    var window_height = $(window).height();
    var left_pos = (window_width - $box.width()) / 2;
    var top_pos = (window_height - $box.height()) / 2;

    $box.css('left', left_pos);
    $box.css('top', top_pos);
}

$(function() {
    var $box = $("#box");
    var window_width = 0;
    var window_height = 0;

    var resizeTimer;
    $(window).on('resize', function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            updateBoxPosition($box);
        }, 25);
    });

    updateBoxPosition($box);          
});​

top関数はポジショニングを処理し、ポジショニングのバインドはonloadイベント中に実行されます。jQueryが必要ですが、ブラウザーがウィンドウの幅を処理する方法には多くの違いがあるため、この状況にはお勧めします。

サイズ変更イベント用に追加されたタイマーはパフォーマンスのためであり、サイズ変更イベントはサイズ変更中にかなり頻繁に発生します。

于 2012-12-06T12:31:23.057 に答える