在此示例中,图像未居中。为什么?我的浏览器是 Windows 7 上的 Google Chrome v10,而不是 IE。
<img src="/img/logo.png" style="margin:0px auto;"/>
在此示例中,图像未居中。为什么?我的浏览器是 Windows 7 上的 Google Chrome v10,而不是 IE。
<img src="/img/logo.png" style="margin:0px auto;"/>
添加display:block;
,它会工作。图像默认是内联的
澄清一下,block
元素的默认宽度是auto
,它当然会填充包含元素的整个可用宽度。
通过将边距设置为auto
,浏览器将剩余空间margin-left
的一半分配给 ,另一半分配给margin-right
。
您可以使用居中自动宽度 divdisplay:table;
div{
margin: 0px auto;
float: none;
display: table;
}
在某些情况下(例如早期版本的 IE、Gecko、Webkit)和继承,即使没有设置、、和,带有 的元素position:relative;
也会阻止工作。margin:0 auto;
top
right
bottom
left
将元素设置为position:static;
(默认值)可能会在这些情况下修复它。通常,具有指定宽度的块级元素将尊重margin:0 auto;
使用relative
或static
定位。
在我的情况下,问题是我设置了没有宽度本身的最小和最大宽度。
每当我们不添加 width 和 addmargin:auto
时,我想它都行不通。这是根据我的经验。宽度给出了它需要提供相等边距的确切位置。
有一个替代方案margin-left:auto; margin-right: auto;
或margin:0 auto;
使用position:absolute;
这种方法的方法是:
您将元素的左侧位置设置为 50% ( left:50%;
) 但这不会正确居中以使元素正确居中您需要给它一个其宽度的负一半的边距,这将使您的元素完美居中
这是一个例子:http: //jsfiddle.net/35ERq/3/
对于引导按钮:
display: table;
margin: 0 auto;
把这个放在body的css中: background:#3D668F; 然后添加:显示:块;边距:自动;到img的css。
我记得有一天我花了很多时间尝试使 div 居中,使用margin: 0 auto
.
我有display: inline-block
它,当我删除它时,div 正确居中。
正如罗斯指出的那样,它不适用于内联元素。
img{显示:弹性;最大宽度:80%;边距:自动;}
这对我有用。在这种情况下,您还可以使用 display: table。此外,如果您不想坚持这种方法,您可以使用以下方法:
img{位置:相对;左:50%;}