为什么没有利润:汽车中心的形象?

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

The div expands to 100% as it should but the image does not center itself. Why?

div扩展到100%，但图像本身并不中心。为什么?

8 个解决方案

#1

169

Because your image is an inline-block element. You could change it to a block-level element like this:

因为您的映像是一个内联块元素。你可以把它改成块级元素:

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

and it will be centered.

它会居中。

#2

You need to render it as block level;

您需要将它呈现为块级;

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

#3

Add style="text-align:center;"

添加风格= " text-align:中心;"

try below code

尝试下面代码

<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>

#4

i know this is an old post, but wanted to share how i solved the same problem.

我知道这是一个老帖子，但我想分享我如何解决同样的问题。

My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto and display: block work properly. Hope it may help someone in the future.

我的映像继承了一个浮点数:从父类向左。通过设置浮动:none，我可以使空白:0自动显示:块工作正常。希望它能对未来的人有所帮助。

#5

I've found that I must define a specific width for the object or nothing else will make it center. A relative width doesn't work.

我发现我必须为这个对象定义一个特定的宽度，否则其他任何东西都不能使它成为中心。相对宽度不起作用。

#6

open div then put

开放的div然后把

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

image tag (or) content

图像标记(或)内容

close div

关闭div

#7

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

#8

I have found... margin: 0 auto; works for me. But I have also seen it NOT work due to the class being trumped by another specificity that had ... float:left; so watch for that you may need to add ... float:none; this worked in my case as I was coding a media query.

我发现……保证金:0汽车;为我工作。但我也看到它不起作用，因为这门课被另一种具有……浮:左;所以要注意，你可能需要加上……浮:没有;这在我编写媒体查询时起了作用。

#1

169