中心IMG在另一張圖片不動，

我有這樣的代碼中心IMG在另一張圖片不動，

.logo { 
 
    text-align:center; 
 
    position: relative; 
 
    width:100%; 
 
} 
 

 
.logo img:last-child { 
 
    position:absolute; 
 
    right:40%; 
 
    border: 1px solid black; 
 
}

<div class="logo"> 
 
    <img src="http://placehold.it/350x350"> 
 
    <img src="http://placehold.it/250x250"> 
 
</div>

我希望把第二圖像上的第一個。但是，當我調整屏幕的大小時，第一個圖像會移動到。我希望它是固定的，而不是移動。

感謝您的回覆！

來源

2015-10-15 Corentin Branquet

這應該工作，如果你把一個靜態寬度.logo它將保持在它上面的img。否則，即使.logo更改寬度，它也會將其居中。

.logo { 
 
    text-align:center; 
 
    position: relative; 
 
    width:100%; 
 
} 
 

 
.logo img:last-child { 
 
    position:absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    border: 1px solid black; 
 
}

<div class="logo"> 
 
    <img src="http://placehold.it/350x350"> 
 
    <img src="http://placehold.it/250x250"> 
 
</div>

來源

2015-10-15 12:22:47 Thaillie

我想它的jsfiddle，當我調整移動尺寸它移動 –

@CorentinBranquet，它如何移動？有了這個代碼，它保持在容器div中（甚至在調整大小）。 – Thaillie

自己看看它是如何工作的，當你調整結果部分jsfiddle.net/guksqd5p/1 –

讓我知道。您可能需要將它添加到這兩個類中，並使用z-index將它們堆疊在一起。

.logo img:last-child { 
    position:absolute; 
    left:50%; 
    top: 50%; 
    transform: translateY(-50%) translateX(-50%); 
    -webkit-transform: translateY(-50%) translateX(-50%); 
    -moz-transform: translateY(-50%) translateX(-50%); 
    -ms-transform: translateY(-50%) translateX(-50%); 
    border: 1px solid black; 
}

來源

2015-10-15 12:23:01 plushyObject

你應該使用這樣 -

更新 -

，你需要添加 -

img{ 
    max-width:100%; 
}

img{ 
 
    max-width:100%; 
 
} 
 

 

 
.logo { 
 
    text-align:center; 
 
    position: relative; 
 
    width:100%; 
 
} 
 

 
.logo img:last-child { 
 
    position:absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    border: 1px solid black; 
 
    }

<div class="logo"> 
 
    <img src="http://placehold.it/350x350"> 
 
    <img src="http://placehold.it/250x250"> 
 
</div>

來源

2015-10-15 12:23:45

親眼看看它是如何工作的jsfiddle.net/guksqd5p/1 –

你是否提供了代碼檢查 - http://jsfiddle.net/guksqd5p/3/ –

.logo { 
 
    text-align:center; 
 
    position: relative; 
 
    width:100%; 
 
    
 
} 
 

 
.logo img:last-child { 
 
    position:absolute; 
 
    right:40%; 
 
    top:0px; 
 
    border: 1px solid black; 
 
}

<div class="logo"> 
 
    <img src="http://placehold.it/350x350"> 
 
    <img src="http://placehold.it/250x250"> 
 
</div>

來源

2015-10-15 12:25:57 user2505019

自己看看它是如何工作的https://jsfiddle.net/guksqd5p/1/ –

因爲你想從正確的40％。如果你允許有相同的空間或像素，我可以修復它 – user2505019

中心IMG在另一張圖片不動，

回答

相關問題