103

此示例中,图像未居中。为什么?我的浏览器是 Windows 7 上的 Google Chrome v10,而不是 IE。

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

10 回答 10

229

添加display:block;,它会工作。图像默认是内联的

澄清一下,block元素的默认宽度是auto,它当然会填充包含元素的整个可用宽度。

通过将边距设置为auto,浏览器将剩余空间margin-left的一半分配给 ,另一半分配给margin-right

于 2011-04-20T17:24:40.543 回答
15

您可以使用居中自动宽度 divdisplay:table;

div{
margin: 0px auto;
float: none;
display: table;
}
于 2016-02-04T09:29:01.413 回答
14

在某些情况下(例如早期版本的 IE、Gecko、Webkit)和继承,即使没有设置、、和,带有 的元素position:relative;也会阻止工作。margin:0 auto;toprightbottomleft

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

于 2012-08-21T15:00:33.010 回答
11

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

于 2013-01-31T17:36:44.133 回答
6

每当我们不添加 width 和 addmargin:auto时,我想它都行不通。这是根据我的经验。宽度给出了它需要提供相等边距的确切位置。

于 2013-03-28T22:08:35.500 回答
2

有一个替代方案margin-left:auto; margin-right: auto;margin:0 auto;使用position:absolute;这种方法的方法是:
您将元素的左侧位置设置为 50% ( left:50%;) 但这不会正确居中以使元素正确居中您需要给它一个其宽度的负一半的边距,这将使您的元素完美居中

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

于 2014-03-26T01:15:10.797 回答
0

对于引导按钮:

display: table; 
margin: 0 auto;
于 2017-03-17T18:42:14.843 回答
0

把这个放在body的css中: background:#3D668F; 然后添加:显示:块;边距:自动;到img的css。

于 2019-01-09T03:21:27.343 回答
0

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

我有display: inline-block它,当我删除它时,div 正确居中。

正如罗斯指出的那样,它不适用于内联元素。

于 2020-08-26T21:59:04.783 回答
0

img{显示:弹性;最大宽度:80%;边距:自动;}

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

img{位置:相对;左:50%;}

于 2020-11-06T07:18:57.693 回答