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>更改为块元素。将display: block;添加到您的CSS中，它将居中。

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

默认情况下，

<img>标记是内联块，在使用边距技巧时不会居中。

此外，您可以只使用margin-left和margin-right而不是同时使用margin，但我总是喜欢尽可能少的代码行。< / p>

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

Answer 2

你可以用CSS做到这一点，但HTML也有一个内置选项。祝你好运！

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

HTML / CSS：margin：自动不适用于<img/>标记

2 个答案: