Question

我需要在屏幕中央显示4张图像。我需要将这些图像堆叠在一起。我解决了堆栈部分：

.img-container { position: relative;  }

.img-container .top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

<div class="img-container">

    <img src="icon-1.png">
    <img class="top" src="icon-2.png">
    <img class="top" src="icon-3.png">
    <img class="top" src="icon-4.png">

</div>

<div >
    <img class="img-responsive center-block " src="another-image-below.png"
      style="display: block; margin: 0 auto;">
</div>

那给了我4张堆叠的图像，但现在我需要将所有4张图像居中（水平）。 “ another-image-below.png”只是另一个图像，它也居中，但必须放置在4个堆叠图像的下方。听起来很简单，我尝试了所有方法，但无法解决。我该如何实现？

谢谢。

编辑： https://jsfiddle.net/b5p8dkcu/4/

Answer 1

在您的示例中，您不需要z-index，除非您在图像后面的某个位置有另一个元素。

您只需将align="center"添加到<div align="center" class="img-container">。

编辑：

<html>
<style>

.img-container {
  position: relative;
  top: 0;
  left: 0;
}
.top {

}

<div align="center" class="img-container">

    <img src="icon-1.png">
    <img class="top" src="icon-2.png">
    <img class="top" src="icon-3.png">
    <img class="top" src="icon-4.png">

</div>

<div >
    <img class="img-responsive center-block " src="6.png"
      style="display: block; margin: 0 auto;">
</div>

如果您需要它们彼此垂直叠放：

<style>
.img-container {
  position: relative;
  top: 0;
  left: 0;
}
.top {
 display: block;
}

如果您需要它们在字面上相互重叠：

<style>
.img-container {
  position: relative;
  top: 0;
  left: 0;
}
.top {
position: absolute;
}

将堆叠的图像水平居中

1 个答案: