Question

Here is a piece of normal code from my site for centered images:

<img width="600" alt="Image" src="img-src.jpg" style="width: 600px;"
 class="center" />

I am using inline styles with a class of center (the css for center is margin:0 auto;) to center my images on a page. I cannot set a standard width for images with the center class because the images vary in widths.

I know jQuery has a CSS property and that got me to thinking if I can use jQuery to read the image width from the image properties and automatically insert width: *image-size pulled from img properties*px;to any image that has a class of center thus eliminating the need for me to manually set the image width for every image.

Please provide examples as I not fluent in JS enough to write this myself.

Answer 1

What about giving your images a container with text-align : center:

<div style="text-align : center;">
    <img src="..." />
</div>

Here’s a demo: http://jsfiddle.net/YfFht/

A CSS solution will be good for performance.