Trouble Centering Dynamically Inserted Image

Question

I have a carousel for users to pick a thumbnail from and when they click it a larger image shows up inside a DIV below. On page load there is a default image that is in the DIV and it centers horizontally quite well using css.

Problem is when a user clicks another the image shows up (via jquery) but the image is no longer centered horizontally. Being that is it inserted dynamically I'm not sure it is picking up the CSS associated with it. The jquery is executed at $(document).ready, not sure if that is the problem. I've tried using different width's to solve the problem and nothing seemed to work. The images all have different widths so I can't just use one width (which most likely would work).

Any ideas? Oh, and yea, if you see more efficient ways of doing things don't be afraid to suggest. Thanks.

<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 function for click:

 $('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

Generally margin:auto only works with fixed width elements.

You could always position it center with 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;
}

And then:

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

Answer 2

Well, just based on your comment that it works originally but not when dynamically inserted, I'd start looking at the differences between your dynamic version and the original.

I definitely see a difference. Your dynamic replacement: $('#large_image_display').html(full_img); is replacing the <p> element that you are using to center the contents.

Either do $("#large_image_display p").html(full_img) or add <p> to your full_img .