0

假设我必须将图像 RIGHT 放置在适当的位置，但我需要它的 CENTER 位于该位置。我想将图像放置在 div 的左上角，所以我将图像放置在 div 中，将位置：相对于 div 和位置：绝对值设置为图像，然后将其顶部和左侧值设置为 0。它非常有效，但我需要该图像的中心位于左上角。我会手动设置顶部：-xpx，左侧：-ypx 但我没有图像大小的任何特定值（可能会有很大差异）。那么有什么办法可以说： position: absolute-but-i'm-talking-about-the-center; 顶部：0px；左：0px；？

真的非常感谢！

马泰奥

4

4 回答 4

1

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

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

于 2012-12-24T14:14:15.640 回答
0

No need to use Javascript, this can be done in CSS.

The required HTML: (you must change the div to an img obviously)

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

The required 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

The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;) But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.

于 2013-01-14T11:58:20.750 回答
0

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

像这样的东西：

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

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

于 2012-12-24T14:20:51.787 回答
0

你有没有尝试过;

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

试一试。

于 2012-12-24T14:13:44.060 回答