gpt4 book ai didi

HTML/CSS : margin:auto not working for tag

转载 作者:行者123 更新时间:2023-11-28 15:51:35 25 4
gpt4 key购买 nike

我制作了一个 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>到 block 元素。添加display: block;到您的 CSS,它将居中。

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

<img>默认情况下,标记是行内 block ,在使用边距技巧时不会居中。

另外,不要同时拥有 margin-leftmargin-right你可以只使用 margin您不必这样做,但我总是喜欢尽可能少的代码行。

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

关于HTML/CSS : margin:auto not working for <img> tag,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22103811/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com