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

In this example the image is not centered. Why? My browser is Google Chrome v10 on windows 7, not IE.

在这个例子中，图像不是居中的。为什么?我的浏览器是谷歌Chrome v10上的windows 7，而不是IE。

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

7 个解决方案

#1

183

add display:block; and it'll work. Images are inline by default

添加显示:块;和它会工作。默认情况下，图像是内联的

To clarify, the default width for a block element is auto, which of course fills the entire available width of the containing element.

要澄清的是，块元素的默认宽度是auto，它当然会填充包含元素的整个可用宽度。

By setting the margin to auto, the browser assigns half the remaining space to margin-left and the other half to margin-right.

通过将页边距设置为auto，浏览器将剩下的一半空间分配给左页边距，另一半空间分配给右页边距。

#2

Under some circumstances (such as earlier versions of IE, Gecko, Webkit) and inheritance, elements with position:relative; will prevent margin:0 auto; from working, even if top, right, bottom, and left aren't set.

在某些情况下(如早期版本的IE, Gecko, Webkit)和继承，元素的位置:相对;将防止保证金:0汽车;从工作，即使顶部，右边，底部和左边没有设置。

Setting the element to position:static; (the default) may fix it under these circumstances. Generally, block level elements with a specified width will respect margin:0 auto; using either relative or static positioning.

将元素设置为位置:静态;(默认)在这种情况下可以进行修正。一般来说，具有指定宽度的块级元素将会尊重空白:0 auto;使用相对或静态的定位。

#3

In my case the problem was that I had set min and max width without width itself.

在我的例子中，问题是我设置了最小和最大宽度而没有宽度。

#4

Whenever we don't add width and add margin:auto, I guess it will not work. It's from my experience. Width gives the idea where exactly it needs to provide equal margins.

无论何时我们不增加宽度和边距:自动，我猜它不会工作。从我的经验。宽度给出了它需要在哪里提供相等的边距的概念。

#5

You can center auto width div using display:table;

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

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

#6

there is a alternative to margin-left:auto; margin-right: auto; or margin:0 auto; for the ones that use position:absolute; this is how:
you set the left position of the element to 50% (left:50%;) but that will not center it correctly in order for the element to be centered correctly you need to give it a margin of minus half of it`s width, that will center your element perfectly

还有一种方法可以替代左边框:auto;margin-right:汽车;或保证金:0汽车;对于那些使用位置的人:绝对的;这就是:你将元素的左位置设置为50%(左:50%)，但这将不会正确地将元素集中到正确的元素中，你需要给它一个-半宽度的边距，这样就能完美地将你的元素居中。

here is an example: http://jsfiddle.net/35ERq/3/

这里有一个例子:http://jsfiddle.net/35ERq/3/

#7

For a bootstrap button:

一个启动按钮:

display: table; 
margin: 0 auto;

#1

183