将堆叠的图像水平居中

本文介绍了将堆叠的图像水平居中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要在屏幕上居中显示4张图像.我需要将这些图像堆叠在一起.我解决了堆栈部分:

I need to display 4 images centered in the screen. I need this images must be stacked one of top another. I resolved the stack part:

.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个堆叠图像的下方.听起来很简单，我尝试了所有方法，但无法解决.我该如何实现?

That gives me the 4 images stacked BUT now I need to center all 4 of them (horizontally). The "another-image-below.png" is just another image that it is also centered but that must be placed below the 4 stacked images.It sound simple, and I tried everything but I cannot resolve it.How can I achieve that?

谢谢.

https://jsfiddle.net/b5p8dkcu/4/

推荐答案

您的示例中不需要z-index，除非您在图像后面必须有另一个元素.

You don't need the z-index in your example, unless you have another element somewhere that has to be behind the images.

您只需将 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>

如果您需要它们彼此垂直叠置:

If you need them to be vertically on top of each other:

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

如果您需要它们在字面上彼此重叠:

If you need them to be literally on top of each other:

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

这篇关于将堆叠的图像水平居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！