如何使用内联 css 将图像定位在 html 中？

Posted 2023-02-24

【中文标题】如何使用内联 css 将图像定位在 html 中？

【英文标题】：How to position the image in html with inline css?

【发布时间】：2021-08-25 02:25:29

【问题描述】：

我正在尝试将图像定位在某个特定位置，因此我需要使用“top”、“left”参数，而不仅仅是“align: center”。我使用了下面的代码，但它无法将图像移动到屏幕上的任何位置，它在某个位置保持不变。

<img src="./assets/button.png"  position: absolute; width: 346px; height: 40px; left: 1041px; top: 546px;>

请帮助解决这个问题。提前致谢！

【参考方案1】：

问题是您缺少“样式”属性，否则您的代码应该可以正常运行。

【参考方案2】：

这样使用

<img src="./assets/button.png"  style="position: absolute; width: 346px; height: 40px; left: 1041px; top: 546px;">

此外，当您将其定位到特定位置时，您必须确定它是相对于哪个位置。

假设您希望它相对于一个 div。让那个 div 的样式像这样

<div style="position: relative;">
// other codes here
</div>

【讨论】：

通过使用相对位置，我可以将图像固定在某处，比如页面底部，即使页面中没有其他内容？

默认情况下，abything 自动相对于主体。因此，如果您没有任何东西，则将元素设为绝对并给出底部：0。然后它将其定位到底部

哦，太好了。我知道了，谢谢你的帮助！

【参考方案3】：

使用类似的东西。 把所有的css属性放到style里

<img 
    src="./assets/button.png"
    
    style="position:absolute; width:346px; height:40px; left:1041px; top:546px;"
>