Как правильно позиционировать изображения?

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%); 
}