将堆叠的图像水平居中

编程入门行业动态更新时间:2024-10-12 22:27:15

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

我需要在屏幕上居中显示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?

谢谢.

jsfiddle/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 { }

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

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

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

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

更多推荐