Html 在 DIV 中定位东西（与 CSS 相关）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8820161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Positioning things inside a DIV (css-related)
提问by ZENKES
i'll try to make my question really simple 2 you
我会尽量让我的问题很简单 2 你
Basically, i have a DIV, in which i have a picture
基本上，我有一个 DIV，其中有一张图片
What CSS stylesshould i apply to the picture to position it correctly inside the div with the condition that everytime i resize the browser window it stays there(inside the div) at the same distance from the borders
我应该将哪些 CSS 样式应用于图片以将其正确定位在 div 内，条件是每次我调整浏览器窗口大小时，它都停留在那里（在 div 内）与边框的距离相同
Sorry for wasting your time but i'm still a newbie which needs help, thank you alot!
很抱歉浪费您的时间，但我仍然是一个需要帮助的新手，非常感谢！
code
代码
html
html
<div id="super_div">
<img id="eyes" src="images/eyes.png" />
</div>
css
css
that's the question :)
回答by Alex Morales
You need to look at absolute positioning. First, you set the containing div's position attribute to relative. For example:
您需要查看绝对定位。首先，将包含 div 的位置属性设置为相对。例如：
#super_div
{
position: relative;
}
Then, you set the image's position property to absolute and use the top and left or right properties to place it inside the parent div. So, for example:
然后，将图像的 position 属性设置为 absolute 并使用 top 和 left 或 right 属性将其放置在父 div 内。因此，例如：
#eyes
{
position: absolute;
top: 20px;
left: 20px;
}
That's how you make the image keep its current position no matter what. Here's a link to an article explaining the basics.Hope this helps.
无论如何，这就是您使图像保持其当前位置的方式。这是一篇解释基础知识的文章的链接。希望这可以帮助。
回答by adman_9000
This will get it horizontally centered:
这将使其水平居中：
margin:auto;
If you need it vertically centered as well then things get a bit more tricky. You can either resort to tables, use a background image (if this is appropriate to your situation) or fiddle with the css. I used the code on http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/as a basis for solving a similar situation I had a while ago..
如果您还需要将其垂直居中，那么事情就会变得更加棘手。您可以求助于表格，使用背景图像（如果这适合您的情况）或摆弄 css。我使用http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/上的代码作为解决我不久前遇到的类似情况的基础..
