How do I dynamically center images?

Question

Question by Wilfred

With css and javascript/jquery, how do I center the images I have displayed vertically down a page? Let me draw a diagram.
This is what I have…

-------
|     |
|     |
-------
----------
|        |
|        |
----------
------
|    |
|    |
------

This is what I want

  -------
  |     |
  |     |
  -------
-----------
|         |
|         |
-----------
   -----
   |   |
   |   |
   -----

Answer 1

Set the following CSS on your centered image class:

display: block;
margin: 1em auto; /* the key here is auto on the left and right */

Answer 2

A small snippet will get this done

display: inline-block;
margin: 1em auto;

Using jQuery you can set the properties like:

$("img#selector").css({
    'display':'inline-block',
    'margin' : '1em auto'
});