CSS将图像居中置于图像之上

你好,我有一个问题,使一个图像居中的另一个图像,以便它将工作事件时,调整窗口大小。目前我已经使它居中于较大的屏幕尺寸上,但是当它被调整到较小的尺寸时,它不会保持居中...请参见下面的屏幕和代码。

?

?

?

?

下面是代码。对于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;
}

我该怎么做才能使图书图像在所有大小的窗口上始终以石头图像为中心?

转载请注明出处:http://www.cshftz.com/article/20230526/2458605.html