overlay and center images

Question

I have two images, of unknown but equal size, which I would like to be horizontally centered, on top of each other, and vertically within the flow of my page. I have tried:

<div>text before the image</div>
<div style="text-align: center"><img src="A.png" /></div>
<div style="text-align: center"><img src="B.png" /></div>
<div>text after the image</div>

This centers the images, but does not overlay them on top of each other. I have tried:

<div>text before the image</div>
<div style="text-align: center">
    <div style="position: absolute"><img src="A.png" /></div>
    <div style="position: absolute"><img src="B.png" /></div>
</div>
<div>text after the image</div>

This overlays the two images, but does not center them (which I hoped "text-align: center" would help with), and interacts badly with the text after the image (which I had hoped the wrapper div would help with).

What can I do?

Answer 1

You can do something css like:

img.overlay {
margin:auto;
position:absolute;
left:0;
right:0;}

reference: http://codepen.io/shshaw/full/gEiDt

I believe you can go with position:fixed as well :)

EDIT: like this:

<div>text before the image</div>
<div style="position:relative;">
    <img src="A.png" style="visibility:hidden;" /> <!-- spacer -->
    <img src="A.png" class="overlay" />
    <img src="B.png" class="overlay" />
</div>
<div>text after the image</div>