Centring an image when margin:0 auto; and absolute positioning doesn't work

Question

I'm trying to centre most of the images in this page, all the ones I need to centre are of class .loadMeLater .

The image is a loading spinner placeholder and then the real image is loaded when it appears in the viewport. I want the placeholder and the real image to be centred. They are both in the same element, which has the class .loadMeLater .

I tried margin:0 auto and that doesn't work, I can't use absolute positioning and left:0 and right:0 because that causes the image's container to be too small.

Currently I'm centring the spinner with relative positioning, left:50% , and margin-left:-0.5*spinner-width; And I am centring the image using a calculation in javascript involving the width of the image and the parent.

There has to be an easier way to centre the image. Anyone have any ideas how to do so?

Here is the site: http://irfandesign.com/dev/

To show the elements that have the images, click on ' learn more about me ' or ' work '. Then scroll down to them.

Answer 1

Try just

margin:auto;

I'm not sure if what you have is actually a valid implementation.

Answer 2

By default an img tag has 'display: inline-block;'

if you select your img tag and do this:

img {
    display:block;
    margin: 0 auto;
}

It will center your image within its container div