IE8、FF3 <img>アライメントセンターの問題

Question

IEとFirefoxで画像が中央に配置されない不思議なバグに遭遇しました。ページの読み込み中に画像の中心が表示されますが、ページが読み込まれると不思議に左に移動します。私は、次のCSSとして設定されている：

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

とHTMLマークアップ：

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

注 ChromeとSafariで私はこのバグを経験しておりませんことを。

更新：画像には、min-width: 850pxとwidth: 100%の属性を持つコンテナクラスの親はありません。この画像の右端に画像がありますが、絶対に配置されています。イメージの真上にあるヘッダ要素がありますが、margin-bottomはゼロに設定されています。

更新：

#header { 

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

Answer 1

私はここにあなたのコードをシミュレートしようとした次のCSSを持っている問題を引き起こしているヘッダがあります。画像は中央に揃えられます。

http://jsfiddle.net/fSueu/

私が何かを逃した場合、あなたは私の詳細を与えることができますか？

Answer 2

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

センターのテキストをコンテナに配置すると、画像がIEで中央揃えになります。

Answer 3

こんにちは、あなたがこのような

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/

もっととして簡単に行うことができますインフォメーションアバットセンターhttp://www.brunildo.org/test/img_center.html