Question

我正在使用此网站：https://dev.notevenpast.org/brian-levack-possession-and-exorcism/

在这个页面中，我试图将一个图像居中于一个id为monthly-feature-banner的div中。以下是横幅和图像的样式：

#monthly-feature-banner {
    width: 100%;
}
#monthly-feature-banner img {
display: block;
margin: 0 auto;
}

奇怪的是，在Chrome和FF中，图像边距并不相等。

问题：为什么会这样？问题：我该怎么做才能解决它？

编辑：以下答案表明text-align: center;与margin: 0 auto;有同样的问题它应该有效，但事实并非如此。此外，如果我从整个页面中删除它，盒子大小修复有帮助，但它有副作用，使其不切实际。来自@Alohi的评论正确指出，将clear: left;与margin: 0 auto;一起添加到包含div中会产生预期的效果。我将接受包含该信息的第一个答案。

Answer 1

删除#monthly-feature-banner img并将text-align: center添加到#monthly-feature-banner

除非您打算将#monthly-feature-banner修改为其他宽度已经是100％，因此width: 100%;或任何display:block;样式都没用，div本身就是一个块。

简而言之：

#monthly-feature-banner {
   text-align: center;
}

小提琴：http://jsfiddle.net/Gs6rG/

如果图像继续向右推，您可以尝试添加clear: left;，这会禁止左侧的浮动元素。

Answer 2

试试这个

#monthly-feature-banner {

    width: 100%;
    margin: 0 auto;

}

为什么保证金：自动未在此处正确计算

2 个答案: