使用 css 定位图像答案

【问题标题】：positioning image using css使用 css 定位图像
【发布时间】：2010-04-24 06:52:30
【问题描述】：

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

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

【问题讨论】：

你能把问题说清楚一点吗？

标签： css image positioning

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

[我假设图像宽度事先不知道，否则解决方案将是显而易见的]

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

【讨论】：

【解决方案3】：

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

如果您知道宽度，则可以设置位置，然后关闭边距。例如，如果您想将其置于页面中间，您可以使用：

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

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

【讨论】：

【解决方案4】：

这是一种方法。您将图像包装在div 中，然后将 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>

Demo

【讨论】：

我按照graphicdivine所说的做了，效果很好，但我仍然有一个问题——div的空白右侧覆盖了后面的另一张图片（z-index较低），让它无法点击怎么能我解决了吗？