我制作了一个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>
怎么了？
您需要将您更改<img>为块元素.添加display: block;到您的CSS,它将居中.
img{
margin-left:auto;
margin-right:auto;
display: block;
}
<img> 默认情况下,标签是内联块,在使用边距技巧时不会居中.
此外,不是同时使用margin-left和margin-right你可以只使用margin你不必,但我总是喜欢尽可能少的代码行.
img{
margin: 0 auto;
display: block;
}