将物品定位在DIV内部（与CSS相关）

Question

我会尝试用简单明了的语言回答你的问题。

基本上，我有一个DIV，里面有一张图片。

在这种情况下，如果要使浏览器窗口缩放时图片仍然保持在 DIV 内，并且与边界的距离保持不变，则应该使用哪些 CSS 样式来正确定位图片？

抱歉浪费你的时间，但我是新手，需要帮助。非常感谢！

示例请参见此链接：EXAMPLE HERE 代码如下：

<div id="super_div">
<img id="eyes" src="images/eyes.png" />
</div>

css

that's the question :)

- ZENKES

---

在哪个 div 中？可以提供一个例子。 - Dunhamzzz

请在您的问题中始终包含代码。 - Filip

Answer 1

你需要关注绝对定位。首先，要将包含div的position属性设置为relative。例如：

#super_div
{
  position: relative;
}

然后，您将图像的position属性设置为absolute，并使用top和left或right属性将其放置在父级div内。例如：

#eyes
{
  position: absolute;
  top: 20px;
  left: 20px;
}

这就是如何使图片保持其当前位置的方法，无论发生什么。 这篇文章链接讲解了相关基础知识。 希望对您有所帮助。

- Alex Morales

Answer 2

这将使其水平居中：

margin:auto;

如果您还需要垂直居中，那么事情会变得有点棘手。您可以使用表格、使用背景图像（如果适用于您的情况），或者调整CSS。我曾经使用http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/上的代码作为解决我之前遇到的类似情况的基础。

- adman_9000