Question

在this example中，图像不居中。为什么？我的浏览器是Windows 7上的Google Chrome v10，而不是IE。

<img src="/img/logo.png" style="margin:0px auto;"/>

Answer 1

添加display:block;，它会起作用。图像默认为内联

为了澄清，block元素的默认宽度为auto，这当然会填充包含元素的整个可用宽度。

通过将保证金设置为auto，浏览器会将剩余空间的一半分配给margin-left，将另一半分配给margin-right。

Answer 2

在某些情况下（例如早期版本的IE，Gecko，Webkit）和继承，使用position:relative;的元素会阻止margin:0 auto;工作，即使top，{{1} <}，right和bottom未设置。

将元素设置为left（默认值）可以在这些情况下修复它。通常，具有指定宽度的块级元素将使用position:static;或margin:0 auto;定位来尊重relative。

Answer 3

在我的情况下，问题是我设置了最小和最大宽度而没有宽度本身。

Answer 4

您可以使用display:table;

居中自动宽度div

div{
margin: 0px auto;
float: none;
display: table;
}

Answer 5

每当我们不添加宽度并添加margin:auto时，我猜它不起作用。这是我的经验。宽度给出了确切需要提供相等边距的想法。

Answer 6

对于使用margin-left:auto; margin-right: auto;的人来说，margin:0 auto;或position:absolute;有替代方法，具体如下：
你将元素的左侧位置设置为50％（left:50%;），但是不能正确居中，以使元素正确居中，你需要给它一个宽度为负半边的边距，这将使您的元素完美居中

这是一个例子：http://jsfiddle.net/35ERq/3/

Answer 7

对于自举按钮：

display: table; 
margin: 0 auto;

Answer 8

将此内容放入人体的CSS中：背景：＃3D668F; 然后加：显示：块；保证金：自动；到img的CSS。

Answer 9

我记得有一天，我花了很多时间尝试使用 margin: 0 auto 将div居中。

我上面有 display: inline-block ，当我删除它时，div正确居中了。

正如罗斯指出，它不适用于嵌入式元素。

Answer 10

img {display：flex;最大宽度：80％； margin：自动;}

这对我有用。在这种情况下，您也可以使用display：table。此外，如果您不想坚持这种方法，可以使用以下方法：

img {position：相对；左：50％；}

自动边距不会在页面中居中

10 个答案: