Горизонтально центральные абсолютные изображения

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

Вы ищете отзывчивый способ компоновки изображений, здесь я сделал это с помощью 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 2

Для отзывчивым результата, вам необходимо установить относительное положение между изображениями, а не абсолютные значения (абсолютное левое положение):

См 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 3

Вы можете дать попробовать на обоих right и lef т 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; = в midddle
• left:110px; + right:0; = 110px от среднего
• left:230px; + right:0; = 230px вдали от среднего

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

Answer 4

Если вы не можете изменить значение left , вам придется изменить их значение translate.

Не знаю, как вы скриптовая все это, но вы будете использовать

transform:translateX(-125px); 

или сколько вам нужно, чтобы переместить их.