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

嗨，你可以像这样轻松地做

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 回答
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 回答