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

Question

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

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

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

Answer 1

使用类似这样的东西。将所有 css 属性放入样式

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

Answer 2

这样使用

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

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

假设您想要它相对于 div。把 div 的样式改成这样

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

Answer 3

问题是您缺少“style”属性，否则您的代码应该运行正确。

How to position the image in html with inline css?