将3个不同的图像居中放置

Question

我有3张图片，所有图片都是不同的宽度，而在CSS中，我将用％来控制宽度。试图将这些图像放在彼此的顶部+使它们居中是证明是棘手的。

通常以图片为中心我会使用Transform：translate（-50％， - 50％）并将我的宽度百分比设置为60％并在CSS中设置我的左右20％，但因为我＆＃ 39; m使用一个使用变换的视差插件：它取消了我的变换：在CSS中翻译（Chrome检查员通过它显示一条线）。我认为。

我需要一种方法来使图像居中，同时仍然允许我宽度％，我无法想到一种可靠的方法。

小提琴：https://jsfiddle.net/bcabm0ru/3/

＆＃13;

＆＃13;

Class Taught

＆＃13;

ul {
  padding-left: 0px;
  list-style: none;
}

li {}

.bubbles-one {
  position: absolute;
  z-index: 2;
}

.image-holder {}

.splash {
  z-index: 4;
  position: absolute;
  margin-top: -15%;
}

.spotlight {
  z-index: 3;
  position: absolute;
}

.man {
  z-index: 1;
  position: absolute;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以告诉我你是否不希望HTML有所不同，但我发现这种方式更干净，更容易处理。你怎么看？的 JSFiddle

HTML

<section class="falling-person">

  <div class="image-wrapper">
    <div class="layer" id="bubble_splash-layer">
      <img class="splash" src="http://www.sharksharkshark.net/testing/assets/images/bubble_splash.png" alt="splash" />
    </div>

    <div class="layer" id="spotlight-layer">
      <img class="spotlight" src="http://www.sharksharkshark.net/testing/assets/images/spotlight.png" alt="spotlight" />
    </div>

    <div class="layer" id="man-layer">
      <img class="man" src="http://www.sharksharkshark.net/testing/assets/images/man.png" alt="man" />
    </div>
  </div>

</section>

CSS

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.image-wrapper {
  width: 100%;
}

img {
  width: 200px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.splash {
  position: absolute;
  margin-top: -15%;
  z-index: 4;
}

.spotlight {
  position: absolute;
  z-index: 3;
}

.man {
  position: absolute;
  z-index: 1
}

Answer 2

看起来您正在使用bootstrap 4.您应该只需将li标签更改为：

<li class="layer d-flex justify-content-center" id="bubble_splash-layer"><img src="http://www.sharksharkshark.net/testing/assets/images/bubble_splash.png" alt="" class="mx-auto d-block img-fluid splash rellax"></li> <li class="layer d-flex justify-content-center" id="spotlight-layer"><img src="http://www.sharksharkshark.net/testing/assets/images/spotlight.png" alt="" class="mx-auto d-block img-fluid spotlight rellax"></li> <li class="layer d-flex justify-content-center" id="man-layer"> <img src="http://www.sharksharkshark.net/testing/assets/images/man.png" alt="" class="img-fluid man rellax"></li>