调整窗口大小时div移动答案

【问题标题】：Div moves when resize window调整窗口大小时div移动
【发布时间】：2013-03-16 14:12:49
【问题描述】：

嗨，我真的很挣扎，无法弄清楚我做错了什么。我正在建立我的朋友网站：bethcalter.co.uk/index.php，在其他浏览器上检查时，div 不在页面上，当我调整窗口大小时，div 正在移动，我不希望他们这样做。

我是 HTML/CSS 新手，我做的不多，我更像是一名设计师，请帮忙，我已经在这里寻找答案，但我认为我的编码有些问题，我已经尝试给 div 自己的包装器等，但它不起作用。

我的 CSS：

#content {
    margin:0;
    width:900px;
    height:400px;
    margin-left:360px;
    margin-top:-930px;
    background-color: #ffffff;
    position:absolute;
}

#bar {
    margin:0 auto;
    width:900px;
    height:90px;
    margin-left:360px;
    margin-top:-1010px;
    background-color: #ffffff;
    opacity: 0.4;
    position:absolute;

}

HTML：

<body>
  <div id="banner">
  </div>
  <div id="background">
    <div id="wrapper">
      <img src="images/Statue4.jpg">
    </div>
  </div>
  <div id="wrap">
    <div id="bar">
    </div>
    <div id="content">
      <img src='images/deb.jpg' style="margin: 40px 40px 40px 40px"/>
    </div>
  </div>    
</body>
</html>

请帮忙，非常感谢

【问题讨论】：

标签： html resize

【解决方案1】：

如果您调整窗口大小，则您的大图像 div 会移动，因为您将其与页面中心对齐。

如果您只想让它左对齐，请在 #wrapper 选择器的 css 中删除此行：

margin: 0 auto;

【讨论】：

大图需要居中，这就是设计，我删除了代码并解决了问题，但是大图需要居中。
好的。我认为将背景图像设置为#wrap 会更合乎逻辑。但是如果您想保留<img> 作为背景，您应该将<div id="wrap"> ... </div>（及其所有内容）移动到<div id="wrapper"> ... </div> 中，然后设置#wrapper { position: relative; }，然后去掉#content
我已经做到了，但我需要 div 容器在大背景图像上方也处于中心位置。感谢您的帮助顺便说一句
只需再次添加#wrapper { margin: 0 auto; } ;) 并删除您设置为#wrapper的任何其他边距
哦，要使内部 div 居中，请添加：#bar { left: 95px; }#content { left: 95px; }