如何動態地中心化圖像？

使用css和javascript/jquery，我該如何將圖像垂直顯示在頁面中央？讓我畫一個圖。這是我有...如何動態地中心化圖像？

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

這就是我想要

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

2012-05-02 Wilfred

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

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

2012-05-02 21:29:11 Brad

的它的容器（因爲它是一個塊），那麼這不會做任何事情嗎？因爲auto會嘗試將一個100％寬度的對象居中。 –

是的，顯示爲塊，在這種情況下是錯誤的。 – Starx

@Starx，你爲什麼這麼說？ – Brad

如果你把每個圖像在<div class="img">之內，然後將其設置爲;

div.img{ 
    margin: 0 auto; 
}

*調整寬度以符合您的需求。

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

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

2012-05-02 21:31:04

一個小片段將完成這件事

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

使用jQuery，您可以設置類似的屬性：如果圖像是佔用100％

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

2012-05-02 21:32:10 Starx

回答