Question

假设我必须将图像放置在适当的位置，但我需要它的中心位于那个位置。我想在div的左上角放置一个图像，所以我将图像放在div中，给出位置：相对于div和位置：绝对到图像然后将其顶部和左侧值设置为0。很有效，但我需要那个图像的中心位于左上角。我会手动设置顶部：-xpx，left：-ypx但我没有任何特定的图像大小值（可能会有很大差异）。那么有什么方法可以说：位置：绝对 - 但我说的是关于中心;顶部：0px;左：0px;？

非常感谢你！

利玛

Answer 1

您可以使用javascript获取图像的大小，然后设置所需的CSS左值。

请注意图像的加载方式，因为它们是异步的，因此在文档准备就绪时无法正常使用。这意味着除非您正确处理图像，否则最终宽度和高度尺寸为0。

Answer 2

你试过了吗？

name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }

放手一搏。

Answer 3

您应该将图像包装在另一个块元素中，并将左侧的负位置放在图像上。

这样的事情：

<div id="something">
  <div class="imagewrap">
    <img>
  </div>
</div>

然后给#something一个相对位置，.imagewrap一个绝对等等...... img应该与left:-50%有一个相对位置。顶部相同。

Answer 4

无需使用Javascript，这可以在CSS中完成。

所需的HTML :(您必须明确将div更改为img）

<div id="container">
  <div id="imgwrapper">
    <div id="img">Change this div-tag to an img-tag</div>
  </div>
</div>

所需的CSS：

#container
{
  position: absolute;
  left: 200px;
  top: 100px;
  height: auto;
  overflow: visible;
  border: 2px dashed green;
}
#imgwrapper
{
  position: relative;
  margin-left: -50%;
  margin-top: -50%;
  padding-top: 25%;
  border: 2px dashed blue;
}
#img
{
  display: block;
  width: 200px;
  height: 100px;
  border: 2px solid red;
}

Click here for a jsFiddle link

使用容器div时margin-left: 50%;显然有效，因为容器的宽度将与内容的宽度完全相同。（您可能需要添加width: auto;）但是margin-top: -50%;将不起作用，因为容器div的高度会随之改变，因此您需要另一个包装器div，在其中使用此margin-top: -50%;，然后您需要通过使用它来修复此错误基于百分比的正填充。显然可能还有其他解决方案来解决这个问题，但解决方案应该是这样的。

使用css定位图像的中心

4 个答案: