11 September 2015

Centre align image within a fluid element using jQuery

Following on from the pure CSS approach to centring an image within a fluid element, here is a jQuery approach. The CSS approach used a CSS3 method not supported in older browsers. This jQuery approach simply calculates the width and height values of the image and applies 50% negative left and top margins to the image so should work fine with older browsers.

The HTML:

The jQuery:

The CSS:

View the demo.