css - 使用 css 定位图像

Question

我确实需要在页面中的某个位置放置一个图像（例如距离左侧 100 像素），但是当我使用 left:100px 时，我想控制图像的中心位置；，图像的位置距其左边缘 100 像素，而不是距其中心...

有没有办法我可以选择图像的中心位置而不是左/右边缘？

Answer 1

这是一种方法。您将图像包装在 adiv中，然后将 div 放置在您想要的位置，将其向左浮动，以便它折叠以适应其内容。然后margin-left: -50%图像本身...

  <div style="position: relative; left: 300px; border: 1px solid red; float: left">
      <img src="#" style="position: relative; margin-left: -50%"/>
  </div>

演示

Answer 2

没有项目总是从左上角放置。如果您知道图像的宽度，这应该很容易解释。

如果您的图像大小是动态的，则最好使用 Javascript 进行此类定位。

Answer 3

[我假设图像宽度事先不知道，否则解决方案会很明显]

我想你最好的选择是把它放在一个固定宽度的元素中，然后在里面居中。当然，如果图像宽度不受限制并且可以超过容器元素的宽度，这将有明显的缺点。

Answer 4

你知道图像的宽度还是变化？

如果您知道宽度，则可以设置位置，然后关闭边距。例如，如果你想把它放在页面中间，你可以使用这个：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

如果您的图像是 100x50 像素。