CODEWITHSUNDEEP
jqueryhtmlcssfirefoxcss-position
AnnaM
AnnaM

Reputation: 103

Horizontally and vertically centered object doesn't work in Firefox?

I have an <img> which is centred horizontally and vertically, and it works in Chrome and Safari but unfortunately not in Firefox. In Firefox the <img> is centred horizontally but not vertically. How do I fix this? Does it have to do with the jquery animation?

You can see an example of my code here: 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();
});

Upvotes: 6

Views: 86

Answers (1)

Alex Char
Alex Char

Reputation: 33218

I create something that will work in firefox. You can use padding-top instead of 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">

Upvotes: 4

Related Questions