Question

我有一个旋转木马供用户选择一个缩略图，当他们点击它时，一个更大的图像显示在下面的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>

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

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

Answer 2

好吧，根据您的评论，它最初是有效的，但动态插入后却没有，我会开始考虑您的动态版本和原始版本之间的差异。

我确实看到了不同之处。您的动态替换：$('#large_image_display').html(full_img);正在替换您用来居中内容的<p>元素。

执行$("#large_image_display p").html(full_img)或将<p>添加到full_img。

以动态插入图像为中心的麻烦

2 个答案: