Đối tượng ở giữa theo chiều dọc và chiều dọc không hoạt động trong Firefox?

Question

Tôi có một số <img> được căn giữa theo chiều ngang và chiều dọc, và nó hoạt động trong Chrome và Safari nhưng tiếc là không có trong Firefox. Trong Firefox, <img> được căn giữa theo chiều ngang chứ không phải theo chiều dọc. Làm thế nào để sửa lỗi này? Nó có liên quan đến hoạt hình jquery không?

Bạn có thể xem ví dụ về mã của tôi ở đây: 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

Tôi tạo thứ gì đó sẽ hoạt động trong firefox. Bạn có thể sử dụng padding-top thay vì top:

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">