Center stacked-images horizontally

问题

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>

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?

Thanks in advance.

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

回答1:

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

You can just add align="center" to the <div align="center" class="img-container">.

EDIT:

<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;
}

来源：https://stackoverflow.com/questions/52785326/center-stacked-images-horizontally

标签

html

css

bootstrap-4