-5

jqueryを使用して、青いボックスを画面の中央に直接配置したいだけです。

jsFiddle: http://jsfiddle.net/Pxjkk/

<html>
4

2 に答える 2

1

青いボックスを中央に配置するには、その位置を次のように設定する必要がありますposition:absolute;

ブルーボックスのサイズが動的に変化する場合は、JavaScriptを使用して中央に配置する必要があります。

簡単な例を次に示します。

$('#color')
    .css('top','50%')
    .css('left','50%')
    .css('margin-left','-'+($('#color').outerWidth()/2)+'px')
    .css('margin-top','-'+($('#color').outerHeight()/2)+'px');

ブラウザのサイズ変更の中心にあることを確認してください。

$(document).bind('resize', function(){
        $('#color')
        .css('top','50%')
        .css('left','50%')
        .css('margin-left','-'+($('#color').outerWidth()/2)+'px')
        .css('margin-top','-'+($('#color').outerHeight()/2)+'px');
    });

センタリングコードを関数にラップし、青いボックスのサイズが変更されるたびに呼び出すことをお勧めします。

編集されたjsFiddleは次のとおりです。

http://jsfiddle.net/mdkpS/

于 2013-03-01T00:42:53.187 に答える
0

CSSでの要素のセンタリングの基本:

  • 要素のコンテナーを作成し、水平に配置しbodyます (画面の中央に配置します)。
  • position: relativeコンテナにセット
  • position: absolute要素に設定
  • 要素に固定されたwidthandを追加しますheight
  • 要素のセットtop: 50%およびleft: 50%オン
  • と をそれぞれとの負の半分に設定margin-leftしますmargin-topwidthheight

jQuery にも同じロジックが適用されますが、ディメンションとマージンを動的に計算できるという点だけが異なります。

于 2013-03-01T00:35:45.853 に答える