html - 叠加和居中图像

Question

我有两张未知但大小相等的图片，我希望它们水平居中，彼此叠加，并垂直放置在我的页面流中。我试过:

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

这会使图像居中，但不会将它们叠加在一起。我试过:

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

这会覆盖两个图像，但不会将它们居中(我希望“text-align: center”会有所帮助)，并且与图像后面的文本交互不良(我希望包装 div 会有所帮助)。

我能做什么？

Answer 1

你可以做一些像这样的CSS:

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

引用:http://codepen.io/shshaw/full/gEiDt

我相信你也可以使用 position:fixed :)

编辑:像这样:

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