Question

I’m loading images dynamically with jquery and can’t seem to center them inside the div. My HTML looks like this:

<div style="width:100%;border: solid 1px #ff0000;">
    <img id="current_photo" src="" style="margin-right: auto; margin-left: auto;max-width:97%;"/>
</div>

The jQuery call looks like this:

    $("#current_photo").attr('src', img_url);
    //$('#current_photo').css({'margin-right':'auto','margin-left':'auto'});

I’m assuming I need to apply the CSS after the image has loaded but this doesn’t seem to work either.

No matter what I try the images are always left justified. Any idea what might be happening?

Answer 1

Add “text-align:center;” to your containing div.
Also no need for the auto margins.