我有一个 <img>
它水平和垂直居中,它适用于 Chrome 和 Safari,但不幸的是不适用于 Firefox。在 Firefox 中 <img>
水平居中但不是垂直居中。我该如何解决?它与 jquery 动画有关吗?
您可以在此处查看我的代码示例: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();
});
最佳答案
我创建了一些可以在 Firefox 中运行的东西。您可以使用 padding-top
代替 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">
关于jquery - 水平和垂直居中的对象在 Firefox 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26391769/