Welcome To Ask or Share your Answers For Others

html - Why doesn't margin:auto center an image?

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Why doesn't margin:auto center an image?

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

Welcome To Ask or Share your Answers For Others

1 Reply

replyed Oct 17, 2021 by 深蓝 (71.8m points)

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.

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

...