0

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ゼロに設定されています。

更新: 次の CSS を持つ問題を引き起こしているヘッダーがあります。

#header {

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

3 に答える 3

0

ここでコードをシミュレートしようとしました。画像は中央に揃えられます。

http://jsfiddle.net/fSueu/

何かが足りない場合は、詳細を教えてください。

于 2012-04-27T01:57:51.630 に答える
0 
#header {
    text-align: center;
            padding: 5px;
            height: 20px;
            margin-top: 0px;
            width: 100%;
            background: #333333;
        }

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

于 2012-04-27T02:31:40.033 に答える
0

こんにちは、このように簡単にできます

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

于 2012-04-27T08:30:06.263 に答える