居中應用它的塊顯示行內塊

我有一個包含img的div，現在我將它居中，但如果我嘗試margin: 0 auto它不起作用。居中應用它的塊顯示行內塊

<div style="display: inline-block"> 

    <img src=""/> 

</div>

我該如何居中包括img在內的整個div？

2012-02-22 eng_mazzy

如果DIV沒有任何動態寬度。然後爲你的DIV定義寬度，因爲margin：0 auto;只適用於固定寬度 – sandeep 2012-02-22 10:06:37

添加text-align: center到div的容器：

<div style="text-align: center"> 
    <div style="display: inline-block"> 
     <img src="..."/> 
    </div> 
</div>

2012-02-22 09:56:27

確定它工作完美，但我不明白爲什麼......我的意思是在div中我沒有任何文本只有img ...這個屬性它只用於文本？ – 2012-02-22 10:00:49

嗯，這個屬性指定了一個塊的**內聯內容**是如何對齊的。所以它適用於文本和其他內聯元素。在你的例子中就是這種情況，因爲包含的div是'inline-block'。 – 2012-02-22 10:02:20

只是給text-align: center您inline-block的div的父

也許你已經知道了，但是請注意，這不會到處工作，因爲IE < 8不適display: inline-block到您<div>元素（沒有黑客可以幫助你）：從quirksmode

IE 6/7只接受與自然的顯示元素的值：內聯。

所以我建議用另一種元素（比如一個簡單的在線<span>），或者，如果你使用HTML5，挑選新的可用元素之一：因爲他們沒有對舊的IE瀏覽器的認可，你可以他們的風格爲內聯塊沒有問題。在這種情況下，<figure>元素可能是合適的。

2012-02-22 09:54:56 fcalderan

如果要居中你的inline-block的DIV內的圖像，那麼你需要指定下列造型給您img標籤

position:relative; 
left: 50%;  
margin-left: -57px; /*Negative half of the width of the image */

但如果你想CENTER div本身，那麼你需要指定容器文本對齊：中心;屬性。檢查這個例子http://jsfiddle.net/5eU3Y/1/

但是，如果你想中心只有這個inline-div塊，那麼你必須知道它的寬度。選中此項。 http://jsfiddle.net/5eU3Y/2/

2012-02-22 10:20:11

回答