将堆叠的图像水平居中 [英] Center stacked-images horizontally
问题描述
我需要在屏幕上居中显示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;
}
这篇关于将堆叠的图像水平居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
