Javascript 如何动态居中图像？

使用css和javascript/jquery，如何将垂直显示在页面下方的图像居中？让我画一张图表。 这就是我所拥有的

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

这就是我想要的

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

---

在居中图像类上设置以下CSS：

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

---

如果将每个图像放置在

中，则将这些图像的样式设置为

div.img{ 
    margin: 0 auto;
}

*调整宽度以满足您的需要

或者，您可以将

的宽度设置为100%，并将文本居中

div.img{
    width: 100%;
    text-align: center;
}

---

一个小片段就可以完成这项工作

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

使用jQuery可以设置如下属性：

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

---

如果图像占据了它的容器的100%（因为它是一个块），那么这将不会做任何正确的事情？因为“自动”将尝试将一个100%宽度的对象居中。@布拉德，看看提供的屏幕操作，他不希望图像的宽度为100%。我似乎无法实现这一点。容器不是窗口宽度的100%有关系吗？只是在JSFIDLE中尝试过这个。很酷的东西，布拉德。我不知道这有用@Wilfred，你能把你的代码发布到JSFIDLE或其他地方吗？有花车吗？