Question

My goal is to have several images displayed horizontally centered within a div which is also horizontally centered within a wrapper. I can do this, but when I invoke jQuery’s “bounce” effect on the images, they align left.

I have fiddled around for ages and can’t get them to remain centered while they bounce.

Check it out at http://jsfiddle.net/vX3gz/2

I’m using the latest Firefox on Win7.

Answer 1

The reason the images are “jumping” left is because bounce is adding a couple of div elements with inline styles that set margin: 0.

So a fairly simple work around would be to override this in your own CSS:

#thin > div {
    margin: 0 auto !important;   
}

Note I am usually against using !important but since you are using it to override an inline style I think that it is acceptable.

Working example: http://jsfiddle.net/vX3gz/33/