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>

这会覆盖两个图像，但不会使它们居中（我希望＆＃34; text-align：center＆＃34;会有所帮助），并且在图像之后与文本进行严重交互（我希望它包装器div会有所帮助。）

我该怎么办？

Answer 1

你可以做一些像css这样的事情：

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

参考：http://codepen.io/shshaw/full/gEiDt

我相信你可以选择职位：固定也是：）

编辑：像这样：

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

叠加和中心图像

1 个答案: