問題をセンタリング動的に挿入画像

Question

私は、ユーザーがサムネイルを選択するカルーセルを持っています。クリックすると、大きな画像が下のDIV内に表示されます。ページの読み込みには、DIVにある既定のイメージがあり、cssを使用して水平方向にかなり整えます。

問題は、ユーザーが別の画像をクリックすると表示されますが（jquery経由）、画像は水平になることがなくなりました。それは動的に挿入されているので、それに関連付けられているCSSをピックアップしているかどうかはわかりません。 jqueryは$（document）.readyで実行され、問題があるかどうかはわかりません。私は問題を解決するためにさまざまな幅を使用しようとしたが、何も動作していないようだ。画像はすべて幅が違うので、1つの幅しか使用できません（ほとんどの場合有効です）。

アイデア？ああ、そして、あなたが物事を行うより効率的な方法を見ているなら、示唆するのを恐れることはありません。ありがとう。

<ul> 
<li><img src="images/objects/ing1.jpg /> </li> 
<li><img src="images/objects/ing2.jpg /> </li> 
<li><img src="images/objects/ing3.jpg /> </li> 
</ul> 

<div id="large_image_display"> 
     <p style="text-align: center"> 
     <a href="images/objects/img1.jpg"><img id="large_image" src="images/objects/preview/img1.jpg" alt="" /></a> 
     </p> 
    </div> 

CSS：クリック用

#large_image_display{ 
width: auto; 
min-height: 300px; 
margin-left: auto; 
margin-right: auto; 

} 

#large_image{ 
width: auto; 
margin-left: auto; 
margin-right: auto; 

jqueryの関数は：

$('img.img_click').click(function(){ 

     var src = $(this).attr('src'); 
     var caption = $(this).attr('alt'); 

     src = src.replace("_thumb", "_preview"); 
     src = src.replace("thumbs/", "preview/"); 

     var lrg_src = src.replace("preview/", ""); 
     var lrg_src = lrg_src.replace("_preview", ""); 


     var linker = '<a class="fancier_image" href="' + lrg_src + '" >'; 


     var image_html = linker + '<img src="'; 
     var image_html_end = '" id="large_image" alt="example1" style="display: none;" /></a>'; 
     var full_img = image_html.concat(src,image_html_end); 

     $('#large_image_display').html(full_img); 

     $('#large_image').fadeIn('slow'); 









    }); 

Answer 1

まあは、ちょうどそれがもともとはなく、動的に挿入するとき、私はあなたの動的なバージョンとオリジナルとの違いを見て開始したい機能することをあなたのコメントに基づいて。

私は間違いなく違いを参照してください。あなたの動的置き換え：$('#large_image_display').html(full_img);は、コンテンツを中央に置くために使用している<p>要素を置き換えています。

いずれかを$("#large_image_display p").html(full_img)に変更するか、full_imgに<p>を追加してください。

Answer 2

一般margin:autoのみ固定幅の要素で動作します。

いつでもjqueryで中心に配置できます。

jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    this.css("top", ($('#large_image_display').height() - this.height())/2+$('#large_image_display').scrollTop() + "px"); 
    this.css("left", ($('#large_image_display').width() - this.width())/2+$('#large_image_display').scrollLeft() + "px"); 
    return this; 
} 

そして：

$('#large_image').center().fadeIn('slow')