如何響應地定位圖像？

Question

您好，我無法將圖片放置在列表項上並使其響應。在全寬度下它能正常工作，但是當我收縮瀏覽器時，它開始變得不一致。你可以在下面的圖片中看到我在說什麼。

全寬度：（瀏覽器在1920像素寬）的瀏覽器已經縮水

後：（瀏覽器在1400像素寬）

HTML：（最低限度此問題需要html）

<section class="contact"> 
    <ul> 
     <li> 
      <img src="/images/footer_box.svg" > 
     </li> 

     <li> 
      <img src="/images/footer_box.svg" > 
     </li> 

     <li> 
      <img src="/images/footer_box.svg" > 
     </li> 
    </ul> 
</section> 

CSS：（這個問題需要最低限度的css）

.contact ul li { 
    position: relative; 
} 

.contact ul li img { 
    position: absolute; 
    left: 214px; 
    top: -110px; 
} 

謝謝！

Answer 1

如果你想居中。

.contact ul li img { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}