CSS-Zentrierung Bild über Bild

Question

Hallo Ich habe ein Problem, ein Bild auf ein anderes Bild zu zentrieren, so würde es funktionieren, wenn Fenstergröße ändern .. Derzeit habe ich es auf größeren Bildschirmgrößen zentriert gemacht, aber wenn es geändert wird kleiner bleibt es nicht zentriert ... Siehe unten Bildschirme und Code.

Hier ist der Code. für HTML Ich Bootstrap mit 3 Thumbnails Komponente:

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

und CSS zur Zeit

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

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

Was kann ich tun, um das Buch Bild immer in Stein Bild auf allen Fenstergrößen zentriert bleiben würde?

Answer 1

müssen Sie position: relative zu .thumbnail setzen, andernfalls .s.pic-overabsolute zum ersten Elternteil in DOM sein wird, in diesem Fall html, deshalb ist es in jedem Stützpunkt

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

nicht gut

Answer 2

Hier ist mein Vorschlag:

.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; 
} 

Ich habe ein Bild Container 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>