如何動態居中圖像？

Question

使用css和javascript / jquery，如何將我在頁面上垂直顯示的圖像居中？ 讓我畫一幅圖。 這就是我所擁有的......

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

這就是我要的

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

Answer 1

在居中的圖像類上設置以下CSS：

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

Answer 2

如果將每個圖像放在<div class="img">則將其設置為;

div.img{ 
    margin: 0 auto;
}

*調整寬度以滿足您的需求。

或者，您可以將<div class="img">的寬度設置為100％並將文本居中;

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

Answer 3

一小段代碼就可以完成

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

使用jQuery，您可以設置如下屬性：

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