html - 水平居中绝对图像

Question

我有一个围绕三个绝对定位图像的相对位置包装器。我如何才能在不更改“左”值的情况下将这些图像居中放置在包装器中，以便使该模块具有流畅的响应能力？

我的 html:

    <div class="illustrations">
       <img src="http://fillmurray.com/175/112" alt="" class="platform desktop"> 
       <img src="http://fillmurray.com/143/110" alt="" class="platform tablet" style="left: 110px;"> 
       <img src="http://fillmurray.com/40/87" alt="" class="platform mobile" style="left: 230px;"> 
    </div>

在这里查看我的 fiddle https://jsfiddle.net/gjexgw86/

只想让图像始终居中而不改变绝对“左”值。

---

Answer 1

如果您不能更改 left 值，则必须更改它们的 translate 值。

不确定你是如何编写整个脚本的，但你会使用

transform:translateX(-125px);

或者无论您需要移动多少。