Horizontal absolute Bilder zentrieren

Question

Ich habe eine relativ Position Wrapper um drei absolut positionierte Bilder. Wie kann ich diese Bilder innerhalb des Wrappers zentrieren, ohne den "linken" Wert zu ändern, damit ich dieses Modul flüssig reagieren lassen kann?

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

Siehe meine Geige hier https://jsfiddle.net/gjexgw86/

will einfach immer die zentrierte Bilder müssen, ohne die absoluten 'links' Werte zu ändern.

---

Answer 1

Sind Sie für ansprechende Art und Weise suchen, um die Bilder anzuordnen, hier ich mit Bootstrap tat.

prüfen: 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

Für ein ansprechendes Ergebnis müssen Sie die relativen Positionen zwischen den Bildern statt Absolutwerte (absolute linke Position) einzustellen:

Siehe in https://jsfiddle.net/gjexgw86/2/ mit negativem margin-left zwischen Bilder und lassen Sie den äußeren Container den Inhalt zentrieren.

.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

Sie können einen Versuch zu beiden right und lef t coordonates geben und verwenden 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>

Beachten Sie, dass:

• left:0; + right:0; = im midddle
• left:110px; + right:0; = 110px weg von Mitte
• left:230px; + right:0; = 230px weg von Mitte

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

Answer 4

Wenn Sie den left Wert nicht ändern , müssen Sie ihren Wert translate ändern.

nicht sicher, wie man das Ganze ist scripting, aber Sie würden

transform:translateX(-125px); 

verwenden oder aber viel Sie brauchen, um sie zu bewegen.