IE8，FF3 <img>對齊中心問題

我遇到了一個奇怪的錯誤在IE和Firefox圖像不會居中對齊。隨着頁面加載圖像中心，但隨着頁面加載，神祕地移動到左側！我有以下設置爲CSS：IE8，FF3 <img>對齊中心問題

#image{ 
display: block; 
margin-left: auto; 
margin-right: auto;}

和HTML標記：

<img id="image" src="example.png" width="158" height="167" alt="Example">

注意，在Chrome和Safari我沒有遇到這個bug。

更新：該圖像沒有父級，除了具有min-width: 850px和width: 100%屬性的容器類。這張圖片的最右側有一張圖片，但絕對定位。圖片正上方有一個標題元素，但其margin-bottom設置爲零。

更新：有，這是造成其具有以下的CSS問題的一個標題：

#header { 

       padding: 5px; 
       height: 20px; 
       margin-top: 0px; 
       width: 100%; 
       background: #333333; 
      }

來源

2012-04-27 GoofyBall

可能還有其他因素。你能提供更多的上下文嗎？ – Kevin 2012-04-27 01:26:10

當然。我會在我的答案中提供更多的背景。 – GoofyBall 2012-04-27 01:27:12

如何保證金：0汽車; – Dips 2012-04-27 02:01:11

我想在這裏模擬你的代碼。圖像與中心對齊。

http://jsfiddle.net/fSueu/

你能不能給我更多的細節，如果我錯過了什麼？

來源

2012-04-27 01:57:51 seanbun

這在理論上應該如何呈現。但由於還有其他很多因素，我很難隔離這個問題。當我將圖片放置在頁面標題的上方時，它居中。也許這就是問題所在。 – GoofyBall 2012-04-27 02:18:51

我更新了你的代碼。現在，當我插入一個標題時，它正在偏離中心！這就是問題！希望解決方案對我們來說變得更加清晰。 – GoofyBall 2012-04-27 02:24:39

我找不到您的代碼。你的代碼是這樣嗎？ http://jsfiddle.net/fSueu/7/編輯代碼後，請點擊頂部的「更新」按鈕。 – seanbun 2012-04-27 02:37:32

#header { 
    text-align: center; 
      padding: 5px; 
      height: 20px; 
      margin-top: 0px; 
      width: 100%; 
      background: #333333; 
     }

居中對齊容器中的文本，圖像將在IE中居中對齊。

來源

2012-04-27 02:31:40 Scott

嗨，你可以很容易做到像這樣

HTML

<div class="wraptocenter due"> 
<span></span> 
<img width="101" height="101" alt="" src="http://images2.fanpop.com/images/photos/5200000/Animated-mermaid-images-mermaids-5260155-313-313.gif"> 
</div>

的CSS

.wraptocenter { 
    background:red; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    width:300px; 
    height:300px; 
}

現場演示http://jsfiddle.net/zPQ9M/

更多info abut center http://www.brunildo.org/test/img_center.html

來源

2012-04-27 08:30:06

IE8，FF3 <img>對齊中心問題

回答

相關問題