0

我在一个<div>. 我希望图像相互叠加（对于使用不透明度的幻灯片）并在我的网站上保持中心位置。

为了使图像叠加，我将它们的位置设置为绝对 ( position: absolute;)。但是，这与我集中图像的方法相冲突。为了使我的图像居中，我为图像提供了以下属性：margin: 0 auto; display: block;当图像的位置设置为绝对时，这不起作用。我可以使用哪些其他方法使我的图像覆盖和/或集中图像。

<div>
<img  id="SlideShow1" src="Images\image1.jpg" width="512" height="512">
<img  id="SlideShow2" src="Images\image2.png" width="512" height="512">
<img  id="SlideShow3" src="Images\image3.jpg" width="512" height="512">
</div>


img {
position: absolute;
   margin: 0 auto;
    display: block;
}
4

3 回答 3

1

看小提琴

要集中绝对定位的项目，请使用

left:0;
right:0;

随着margin:0 auto;

于 2015-08-07T18:08:10.403 回答
1

除了设置自动边距和绝对定位之外，您还需要将所有偏移量（顶部/左侧/等）设置为 0。只要您有声明的高度，此方法就应该有效：

.absolute-center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

（来源）

于 2015-08-07T18:08:45.797 回答
1

另一种选择是使用 CSS3 transform：

img{
  display:block;
  position:absolute;
  left:50%;
  transform:translate(-50%,0);
}

根据需要添加供应商前缀。

问题Center an image with CSS (horizo​​ntal and vertical)下的回答中也提到了这一点。

于 2015-08-07T18:15:52.077 回答