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>

在这里查看我的小提琴https://jsfiddle.net/gjexgw86/

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

Answer 1

如果您无法更改left值，则必须更改其translate值。

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

transform:translateX(-125px);

或者你需要移动它们。

Answer 2

您是否正在寻找安排图像的响应方式，我在这里使用Bootstrap。

点击此处：https://jsfiddle.net/my23wuxz/

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4" style="text-align:center;"><img src="http://fillmurray.com/175/112" alt=""> </div>
    <div class="col-sm-4" style="text-align:center;"><img src="http://fillmurray.com/143/110" alt="" > </div>
    <div class="col-sm-4" style="text-align:center;"><img src="http://fillmurray.com/40/87" alt="" ></div>
  </div>
</div>

Answer 3

对于响应结果，您需要设置图像之间的相对位置而不是绝对值（绝对左侧位置）：

在https://jsfiddle.net/gjexgw86/2/中使用图像之间的左边距保留，并让外部容器以内容为中心。

.illustrations {
    width:100%;
    text-align:center;
    height:140px;
}

.platform {
    transition: all .7s ease-in-out;
}


<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="margin-left: -65px;">
                        <img src="http://fillmurray.com/40/87" alt="" class="platform mobile" style="margin-left: -30px;">
                    </div>

Answer 4

您可以尝试right和lef t coordonates并使用margin:auto;

.illustrations {
  position: relative;
  text-align: left;
  text-align: center;
  height:140px;
  /* see me and my center */
  border: solid;
  background:linear-gradient(to left, transparent 50%, rgba(0,0,0,0.2) 50% ),linear-gradient(to top, transparent 50%, rgba(0,0,0,0.2) 50% )
}

.platform {
  transform: translatey(-50%);/*transform would be for vertical centering , optionnal */
  vertical-align: middle;
  position: absolute;
  left: 0;
  right:0;/* add this to center */
  margin:70px auto;/* 70px from + transform would be for vertical centering , optionnal */
  transition: all .7s ease-in-out;
  }
.illustrations:hover .platform {
  /* see behind */
  opacity:0.5
}

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

请注意：

left:0; + right:0; =在中间
left:110px; + right:0; = 110px远离中间
left:230px; + right:0; = 230px远离中间

https://jsfiddle.net/gjexgw86/4/

水平居中绝对图像

4 个答案: