将图像和图形标签内的锚标签对齐

Question

I am stuck and out of ideas, I tried to achieve the following with flexbox and failed.

What I am trying to achieve is to have an img tag centered inside a figure tag and have an a tag which contains an another img tag(like a button to show a different version of the first image) align at the bottom right corner of the same figure tag.
Let me try to explain with an image:

Here A is our figure tag, B is our first image and C is our anchor tag which itself contains another image.
The A is sized at 350px by 280px
The B is a transparent png of varying sizes, but always a lot smaller then the A
The C contains a 20px by 20px image
The container div#gallery contains many figure tags

Here is what I have right now.

 <div id="gallery" style="display: flex; flex-wrap: wrap; justify-content: center;"> <figure style="background-color:#2A3132; width: 350px; height: 280px"> <img src="https://via.placeholder.com/110x110"> <a href="#"> <img src="https://via.placeholder.com/30"> </a> </figure> </div> 

What I understand is that we can not have C inside A because then it misaligned the B

Answer 1

I have used position:absolute for positioning that small image. As mentioned by OP there is no chance for overlapping the images so it won't be problematic.

 #gallery { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .wrapper { background-color: #2A3132; width: 350px; height: 280px; position: relative; display: flex; justify-content: center; align-items: center; } .sm-img { position: absolute; bottom: 0; right: 0; height: 30px; margin: 0 10px 10px 0; width: 30px; } 

 <div id="gallery"> <figure class="wrapper"> <img src="https://via.placeholder.com/110x110"> <a class="sm-img" href="#"> <img src="https://via.placeholder.com/30"> </a> </figure> </div>