Html 以图像为中心的CSS

您好，我遇到了一个问题，无法将一个图像集中在另一个图像上，以便在调整窗口大小时可以正常工作。。 目前，我已经使它集中在更大的屏幕大小，但当它的大小调整到较小的它不会保持居中。。。 请参阅下面的屏幕和代码

这是代码。 对于HTML，我使用bootstrap 3缩略图组件：

<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>

---

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

您需要将

位置：相对

设置为

。缩略图

，否则，

.s.pic-over

将

绝对

设置为DOM中的第一个父级，在这种情况下

html

，这就是为什么它在每个断点中都不好

缩略图{
显示：块；
保证金：0；
边界：0无；
盒影：无；
位置：相对位置；
保证金：自动；
}
.s-pic-over{
位置：绝对位置；
顶部：20px；
左：0；
右：0；
}

准备工作
我独自一人，在这里感受到存在的魅力，这是为我这样的灵魂的幸福而创造的

您需要将

位置：relative

设置为

.thumbnail

，否则，

.pic-over

对于DOM中的第一个父级将是

绝对的

，在这种情况下

html

，这就是为什么它在每个断点中都不好的原因

缩略图{
显示：块；
保证金：0；
边界：0无；
盒影：无；
位置：相对位置；
保证金：自动；
}
.s-pic-over{
位置：绝对位置；
顶部：20px；
左：0；
右：0；
}

准备工作
我独自一人，在这里感受到存在的魅力，这是为我这样的灵魂的幸福而创造的

以下是我的建议：

.thumbnail {
 text-align:center;
 }
 #image-container
 {
 position:relative;
 width:100%;
 height:300px;
 }
 #stone-1
 { 
 position:absolute;
 z-index:10;
 margin:auto;
 left:0;
 right:0;
 }
 #s-pic-hover-1{
 z-index:9;
 position:absolute;
 margin:auto; 
 left: 0;
 right:0;
 }

我使用了一个图像容器div

  <div class="row">
     <div class="col-lg-3 col-md-6">
        <div class="thumbnail">
           <div id="image-container">
              <img src="http://placehold.it/300x300" id="s-pic-hover-1" alt="Stone 1 | AmberCRO">
              <img src="http://lorempixel.com/100/100" id="stone-1" class="s-pic-over" alt="AmberCRO">
           </div>
           <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>

准备工作
我独自一人，在这里感受到存在的魅力，这是为我这样的灵魂的幸福而创造的

以下是我的建议：

.thumbnail {
 text-align:center;
 }
 #image-container
 {
 position:relative;
 width:100%;
 height:300px;
 }
 #stone-1
 { 
 position:absolute;
 z-index:10;
 margin:auto;
 left:0;
 right:0;
 }
 #s-pic-hover-1{
 z-index:9;
 position:absolute;
 margin:auto; 
 left: 0;
 right:0;
 }

我使用了一个图像容器div

  <div class="row">
     <div class="col-lg-3 col-md-6">
        <div class="thumbnail">
           <div id="image-container">
              <img src="http://placehold.it/300x300" id="s-pic-hover-1" alt="Stone 1 | AmberCRO">
              <img src="http://lorempixel.com/100/100" id="stone-1" class="s-pic-over" alt="AmberCRO">
           </div>
           <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>

准备工作
我独自一人，在这里感受到存在的魅力，这是为我这样的灵魂的幸福而创造的

看起来您需要特别声明

的
位置
。缩略图

相对

。看起来您需要特别声明

的
位置
。缩略图

相对

。谢谢！你增加容器的想法给了我一些好的想法。它也能工作！非常感谢。你增加容器的想法给了我一些好的想法。它也能工作！