Yatay ve dikey ortalanmış nesne Firefox'ta çalışmıyor mu?

Question

Yatay ve dikey olarak ortalanmış bir <img> var ve Chrome ve Safari'de çalışıyor ancak maalesef Firefox'ta değil. Firefox'ta <img> yatay olarak değil dikey olarak ortalanır. Bunu nasıl düzeltirim? JQuery animasyonu ile ilgisi var mı?

Burada benim kod bir örnek görebilirsiniz

: http://jsfiddle.net/amagdk/kan94az0/

HTML

<img src="hover-kitty.png" alt="Hover Kitty"> 

CSS

img { 
    position: absolute; 
    margin: auto; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

jQuery

$(document).ready(function(){ 
var hoverkitty = $("img"); 
    function hover() { 
     hoverkitty.animate({top:'+=20'}, 1000); 
     hoverkitty.animate({top:'-=20'}, 1000, hover); 
    } 
    hover(); 
}); 

Answer 1

Firefox'ta çalışacak bir şey oluşturuyorum. Sen top yerine padding-top kullanabilirsiniz:

var hoverkitty = $("img"); 
 

 
function hover() { 
 
    hoverkitty.animate({ 
 
     'padding-top': '+=20' 
 
    }, 1000); 
 
    hoverkitty.animate({ 
 
     'padding-top': '-=20' 
 
    }, 1000, hover); 
 
} 
 

 
hover();

img { 
 
    position: absolute; 
 
    margin: auto; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://itu.dk/people/akam/ta_challenge/hover-kitty.png" alt="Hover Kitty">