Overlapping 2 Bilder ohne Zentrierung zu verlieren

Question

ich zwei Bilder überlappen müssen, dass ich mit dem folgenden CSS zentriert:

display: block; 
margin: auto; 

Die aktuelle Situation ist this-

The current situation

ich das größere Bild wollen (der eine unten rechts jetzt) ​​unter dem kleineren Bild und der Text ohne verlieren die bereits zentrierten Positionen. Ich habe mit z-index versucht, und der Einstellung der Positionen relative und absolute aber das verwirrt nur mit der Ausrichtung der Bilder auf.

HTML:

<img id="logo" src="Pics/logo1.png" class="animated bounceInUp"> 
<img id="wall" src="Pics/Ywall1.png"> 

CSS:

#logo 
{ 
    height: 200px; 
    width: 200px; 
    display: block; 
    margin: auto; 
    padding-top: 15%; 
} 

#wall 
{ 
    height: 500px; 
    display: block; 
    margin: auto; 
} 

Versuchen diese Antwort auch, aber wieder bekam ich Probleme mit der Ausrichtung. Die Einstellung der Werte top und left ist nicht nur eine große Kopfschmerzen, aber es gibt auch keine perfekte Zentrierung. Diese

:Overlap Images In Center [css]

P.S- Stackoverflow lässt mich nicht Bilder einbetten und betten 2 links, bis ich 10 rep bekommen. Das tut mir leid.

Answer 1

Wäre es möglich, das größere Bild als Hintergrund zu haben?

#wall { 
 
    height: 413px; 
 
    width: 620px; 
 
    display: block; 
 
    margin: auto; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-image: url('http://cdn2.spectator.co.uk/files/2016/07/wall.jpg'); 
 
    text-align: center; 
 
    }

<div id="wall"> 
 
    <div> 
 
     <img id="logo" src="https://logopond.com/avatar/1862/logoholik-icon-logopond2.png" class="animated bounceInUp"> 
 
     <div>Logo Text!</div> 
 
    </div> 
 
</div>