html - CSS 使图像在图像上居中

Question

您好，我在将一张图片置于另一张图片的中心时遇到问题，这样在调整窗口大小时它会起作用。目前我已经让它以更大的屏幕尺寸为中心，但是当它调整到更小的尺寸时它不会保持居中......请参阅下面的屏幕和代码。

这是代码。对于 HTML，我使用的是 bootstrap 3 Thumbnails 组件:

<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="thumbnail">
            <img src="images/stone-1.png" id="stone-1" alt="Stone 1 | AmberCRO">
            <img src="images/notebook-streamline.png" id="s-pic-hover-1" class="s-pic-over" alt="AmberCRO">
            <div class="caption service-1">
                <h3>Preparation</h3>
                <p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
            </div>
        </div>
    </div>
</div>

目前和 CSS

.thumbnail  {
    display: block;
    margin: 0;      
    border: 0 none;
    box-shadow: none;
}

.s-pic-over  {
    position: absolute;
    top: 20px;
    left: 142px;
}

我该怎么做才能让书本图像在所有窗口大小上始终保持在石头图像的中心？

Answer 1

你需要将 position: relative 设置为 .thumbnail ，否则，.s.pic-over 将是 absolute 到 DOM 中的第一个父级，在本例中为 html，这就是为什么它在每个断点中都不好

.thumbnail {
  display: block;
  margin: 0;
  border: 0 none;
  box-shadow: none;
  position: relative;
  margin: auto;
}
.s-pic-over {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-6">
      <div class="thumbnail">
        <img src="//placehold.it/300x300" id="stone-1" alt="Stone 1 | AmberCRO">
        <img src="//lorempixel.com/100/100" id="s-pic-hover-1" class="s-pic-over" alt="AmberCRO">
        <div class="caption service-1">
          <h3>Preparation</h3>
          <p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
        </div>
      </div>
    </div>
  </div>
</div>