Question

我正在尝试移动图像（map.png），但无法移动。

我的HTML代码是：

<div class="map">      
    <h3 style="text-align:right;" >
    <img src="img/map.png" alt="">
    </h3>
    </div>

我的CSS代码是：

.map {
  position: relative;
  top: 20px;
}

我在以下位置有一个GitHub存储库： https://cli.vuejs.org/guide/deployment.html#general-guidelines

Answer 1

我仍然不确定您实际上要实现什么。但是，我已将您的代码重新编码，并以使您的图像垂直和水平居中的方式进行了重新编写。您可以在.image-content类中添加所需的任何CSS。

HTML

<div class="flex-display">
<div class="image-content">
    <img src="https://via.placeholder.com/150" alt=""> //Use you correct image path
</div>
</div>

CSS

.flex-display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.image-content {
  // Write your image styling here if needed
}

Answer 2

确保您的图片位于正确的目录中，并且文件类型正确。要使图像居中并确保它出现在您的网页上，您可以添加此CSS

.map {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 50%;
}

如果尝试此操作后仍然不起作用，则必须与图像有关。确保图片在代码中的拼写相同，请注意！另外，请验证文件路径以及文件类型是否正确。您还可以尝试在/img/map.png

之前添加“ /”

最后，这是解释HTML / CSS图像工作的资源。 HTML IMAGES

Answer 3

.map {
  position: relative;
  margin-top: 20px;
}

根据上述解决方案，您只需要使用 margin-top 而不是保证金，并根据下面的内容更改位置。

.map {
  position: absolute;
  top: 20px;
}

我无法移动图像，该怎么办？

3 个答案: