Jquery 无法将动态插入的图像居中

我有一个旋转木马，用户可以从中选择缩略图，当他们单击它时，下方的DIV中会显示一个较大的图像。在页面加载时，DIV中有一个默认图像，它使用css水平居中

问题是，当用户单击另一个按钮时，会显示图像（通过jquery），但图像不再水平居中。因为它是动态插入的，所以我不确定它是否拾取了与之关联的CSS。jquery在$（document.ready）执行，不确定这是否是问题所在。我试着用不同的宽度来解决这个问题，但似乎没有任何效果。这些图像都有不同的宽度，所以我不能只使用一个宽度（这很可能会起作用）

有什么想法吗？哦，是的，如果你看到更有效的做事方式，不要害怕提出建议。谢谢

<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>

用于单击的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');









    });

$（'img.img_click'）。单击（函数（）{
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（“预览/”，“”）；
var lrg_src=lrg_src.replace（“_preview”，”）；
变量链接器=“”；
var full\u img=image\u html.concat（src，image\u html\u end）；
$（'#大图像显示''）.html（完整图像）；
$（'大图像'）.fadeIn（'慢'）；
});

通常

边距：auto

仅适用于固定宽度的元素

您可以始终使用jquery定位it中心

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')

---

好吧，根据你的评论，它最初是有效的，但不是动态插入的，我会开始研究动态版本和原始版本之间的差异

我确实看到了不同。您的动态替换：

$（'#大图像显示'）.html（完整的img）

正在替换用于将内容居中的

元素

---

要么做

$（“#大图像显示p”）.html（完整img）

，要么将

添加到您的

完整img

是的，我知道边距自动，必须知道宽度。我试过你的解决方案，但它与窗户有关。我需要集中在#大图像显示分区内。@immudiff-我将选择器从窗口更新为“#大图像显示”试试。我知道这很简单。谢谢你，长官！这总是一个狡猾的问题。。祝贺你：D

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