水平中心絕對圖像

我有一個相對位置包裝三個絕對定位的圖像周圍。如何在不改變'左'值的情況下將這些圖像集中在包裝中，以便我可以使這個模塊的流體響應？水平中心絕對圖像

我的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/

我的小提琴只是想總是有不改變絕對的「左」值居中的圖像。

來源

2016-09-30 JordanBarber

如果你想完全忽略它們，你爲什麼使用'position：absolute;'和'left'？我想知道硬編碼定位是如何使某些東西更「流暢」的反應。我認爲在我們解決這個問題之前，我們可能需要退後一步並深入瞭解這個問題的底部。這就是說，如果你想應用基於屏幕尺寸的絕對定位，那麼就在你的CSS中使用'@ media'。 – Santi

你要找的，在這裏我與引導佈置圖像的響應方式。

入住這裏：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>

來源

2016-09-30 20:34:47 ARJUN

對於一個負責任的結果，你需要設置圖像之間的相對位置，而不是絕對值（絕對左側位置）：

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

來源

2016-09-30 20:38:32

你可以給一個嘗試都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/

來源

2016-09-30 20:42:59

如果你不能改變left值，你將不得不改變他們的translate價值。

不知道你如何編寫腳本的整個事情，但你會使用

transform:translateX(-125px);

或不過很多需要移動它們。

來源

2016-09-30 20:43:42 ntgCleaner

水平中心絕對圖像

回答

相關問題