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

时间:2011-04-20 17:24:12

标签: css google-chrome margin centering

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

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

10 个答案:

答案 0 :(得分:207)

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

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

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

答案 1 :(得分:14)

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

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

答案 2 :(得分:10)

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

答案 3 :(得分:10)

您可以使用display:table;

居中自动宽度div
div{
margin: 0px auto;
float: none;
display: table;
}

答案 4 :(得分:6)

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

答案 5 :(得分:2)

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

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

答案 6 :(得分:0)

对于自举按钮:

display: table; 
margin: 0 auto;

答案 7 :(得分:0)

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

答案 8 :(得分:0)

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

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

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

答案 9 :(得分:0)

img {display:flex;最大宽度:80%; margin:自动;}

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

img {position:相对;左:50%;}