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

Question

在此示例中,图像不居中.为什么？我的浏览器是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.

那些阅读这个也可能会发现添加"浮动"没有用,因为任何其他类型的浮动将破坏你的保证金自动. (15认同)
+1为了对.如果你详细说明了`margin:auto`在流程中居中项目需要什么,那么会得到一个很好的答案.(`display:block`或`display:table`,`position:static`或`position:relative`等) (12认同)

Answer 2

在某些情况下(如早期版本的IE浏览器,蛤蚧,Webkit的)和继承的元素position:relative;将阻止margin:0 auto;来自工作,即使top,right,bottom,和left未设置.

将元素设置为position:static;(默认值)可以在这些情况下修复它.通常,具有指定宽度的块级元素将margin:0 auto;使用relative或static定位.

Answer 3

您可以使用中心自动宽度div display:table;

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

Answer 4

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

Answer 5

每当我们不添加宽度和添加margin:auto,我想它将无法正常工作.这是我的经验.宽度给出了确切需要提供相等边距的想法.