为什么没有保证金:汽车中心的图像?

<html> <head> <title>Test</title> </head> <body> <div> <img src="queuedError.jpg" style="margin:auto; width:200px;" /> </div> </body> </html> 

div扩大到100%,但它的形象并不是以自己为中心。 为什么?

因为你的图像是一个内嵌块元素 。 您可以将其更改为块级元素,如下所示:

 <img src="queuedError.jpg" style="margin:auto; width:200px;display:block" /> 

它将被集中。

您需要将其渲染为块级别;

 img { display: block; width: auto; margin: auto; } 

添加style="text-align:center;"

尝试下面的代码

 <html> <head> <title>Test</title> </head> <body> <div style="text-align:center;vertical-align:middle;"> <img src="queuedError.jpg" style="margin:auto; width:200px;" /> </div> </body> </html> 

我知道这是一个旧的post,但想分享我如何解决同样的问题。

我的图像inheritance了父类的float:left。 通过设置float:none我可以使margin:0 auto和display:block正常工作。 希望将来可以帮到别人。

我发现我必须为对象定义一个特定的宽度,否则没有其他东西会使它居中。 相对宽度不起作用。

打开div然后放

 style="width:100% ; margin:0px auto;" 

image标签(或)内容

closuresdiv

 <div style="text-align:center;"> <img src="queuedError.jpg" style="margin:auto; width:200px;" /> </div> 

我发现…保证金:0汽车; 为我工作。 但是我也看到它不起作用,因为这个class级被另一个具体的东西所抛弃。float:left; 所以请注意,您可能需要添加… float:none; 当我编码媒体查询时,这在我的情况下工作。