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设置为零。

更新：有一个导致问题的标头有以下CSS：

#header {

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

Answer 1

我试图在这里模拟你的代码。图像与中心对齐。

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

IE8，FF3 <img/>对齐中心问题

3 个答案: