jQueryを使用したdivの中央揃え

Question

最初にdiv margin: 0 auto;を使用して区切られたdiv margin: 0 auto;は、ユーザーがボタンをクリックしたときに幅を広げるためにjQueryを使用します。サイズ変更後、次のコードを使用して、このサイズ変更されたdivの中心に置きます。$("#organizer_listings_container")コード

// Center content when width changes 
if($("#organizer_listings_container").css("position") != 'absolute') { 
    $("#organizer_listings_container").css("position","absolute"); 
    var left = ($(window).width() - $("#organizer_listings_container").width())/2 + "px"; 
    $("#organizer_listings_container").css('left', left);  // set initial 'left' 
} 
left = ($(window).width() - (852))/2 + "px"; 
$("#organizer_listings_container").animate({'left': left}); // animate to final 'left' 

をリサイズ

の問題：（jQueryのshow()を使用して、それが見えるように）新しいDIVを追加すると、それが正しい#organizer_listings_container、#organizer_listings_containerシフトの下方上に表示されます。今度は新しく追加したdivを削除すると、#organizer_listings_containerは元に戻りません！

これは、使用されたjQueryのセンタリングコードで必要とされる絶対的な位置付けによるものと思われます。新しく追加したdivが削除されたときに、どのようにリサイズされたdivシフトを元に戻すことができますか？その後、算出した高さでtopをオフセットすることによりリサイズのdivアップをシフト新しく追加されたdiv要素の高さを計算するためにjQueryを使用した

はメシエように見える私は

Answer 1

を望むよりも、あなたはjqueryのを使用することを避けることができ、そのようなトップ変位で新しく追加されたdiv要素とセンターそれにクラスを追加します。クラスは、インラインスタイルが含まれているだろうと

<div class="container" style="background:blue; width:100%;"> 
<div class="box" style="background:green; width:50px; height:40px; margin: 0 auto; margin-top:20px;"></div> 
</div> 

注、これは一例です。

jqueryが必要なのは、コンテナの高さを100％にすることだけです。しかし、あなたが箱だけを見るつもりなら、あなたはそれを中心に置くためにコンテナを使用しています、そして、あなたはこの要件を必要としません。