html - 将一个 div 中的图像与其他 div 对齐

Question

我有两个 div 的 A 和 B。div A 的宽度是自动的，div B 的宽度设置为一个特定的值，该值小于浏览器窗口的宽度。 div B 也位于浏览器窗口的中间。

在 div A 中，我有一张图片。我想要的是图像始终与 div B 对齐，即使在我调整浏览器窗口大小时也是如此。

#header {
  background-color: #761D1F;
  height: 150px;
  width: auto;
  margin: -8px;
  margin-top: 20px;
}
#div-body {
  width: 1100px;
  height: 1000px;
  margin: 0 auto;
  margin-top: 50px;
}
#img {
  margin-top: 25px;
  height: 100px;
  width: 100px;
  margin-left: 48px;
}

<div id="header">
  <img id="img" src="http://lorempixel.com/100/100/">
</div>

<div id="div-body">
  ...
</div>

Answer 1

您可以将 img 包装在另一个 div 中，并将相同的 CSS 应用于 div B 和包装器。

#header {
  background-color: #761D1F;
  height: 150px;
  width: auto;
  margin: -8px;
  margin-top: 20px;
}
#div-body, #image-wrapper {
  width: 1100px;
  height: 1000px;
  margin: 0 auto;
  margin-top: 50px;
}
#img {
  margin-top: 25px;
  height: 100px;
  width: 100px;
}

<div id="header">
  <div id="image-wrapper">
    <img id="img" src="http://lorempixel.com/100/100/">
  </div>
</div>

<div id="div-body">
  ...
</div>