HTML / CSS：margin：auto不适用于 <img> 标签

Question

我制作了一个html文档，并在其中放置了<img>标记。
我想使用margin-left:auto和margin-right:auto对齐图像的中心，但是它不起作用。 这是HTML代码：

<html>
<head>
    <style>
        img {
            margin-left:auto;
            margin-right:auto;
        }
    </style>
</head>

<body>
    <img src="http://www.w3schools.com/images/lamp.jpg" />
</body>
</html>

怎么了？

Answer 1

您需要将<img>更改为block元素。 添加display: block; 到您的CSS，它将居中。

img{
    margin-left:auto;
    margin-right:auto;
    display: block;
}

默认情况下， <img>标签是行内块，使用边距技巧时不会居中。

另外，不必同时使用margin-left和margin-right ，而不必使用margin ，但是我总是喜欢使用尽可能少的代码行。

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

Answer 2

您可以使用CSS来做到这一点，但是HTML对此也有一个内置选项。 祝好运！

<html><body><img src="IMG SRC HERE" align="center/right"></html></body>