将div中的图像与其他div对齐

Question

我有两个div的A和B. div A的宽度是auto，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>

Answer 2

所以你有#div-body，宽度为1100像素并且已经对齐，因此它始终位于屏幕中间。您要使用什么来确定img与#div-body完全一致的余量是calc。这意味着保证金应该是屏幕的50％减去#div-body的一半（50％ - 550px）。所以在你的CSS中：

＆＃13;

＆＃13;

#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;
  background-color: grey;
}
#img {
  margin-top: 25px;
  height: 100px;
  width: 100px;
  margin-left: calc(50% - 550px); /* THIS IS CHANGED*/
}

＆＃13;

<div id="header">
  <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Singapore_Road_Signs_-_Information_Sign_-_One-way_traffic_ahead.svg" height="150px;">
</div>

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

＆＃13;

＆＃13;

＆＃13;