Wie positioniert man Bilder in Abhängigkeit?

Question

Hallo, ich habe Probleme, ein Bild über einen Listeneintrag zu positionieren und darauf zu reagieren. Bei voller Breite funktioniert es, es ist korrekt positioniert, aber wenn ich den Browser verkleinere, beginnt es aus der Ausrichtung zu geraten. Sie können sehen, wovon ich rede in den Bildern unten.

Full Width: (Browser bei 1920 px breit)

Nach Browser geschrumpft wurde:

HTML (bei 1400 px breit Browser): (Nötigste html für diese Frage erforderlich)

<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: (Nötigste CSS für diese Frage erforderlich)

.contact ul li { 
    position: relative; 
} 

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

Dank!

Answer 1

Wenn Sie es zentrieren möchten.

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