使用内联块的奇怪的增长动画

Question

我在div中有一些div作为内联块。现在，当我为它们制作动画时，其余部分会下降然后上升到原来的位置。我保持了所有的边距，高度，宽度和所有 - 因为，最终位置是我想要的。只是动画困扰着我。有什么帮助吗？

以下是jsfiddle的示例。我的原始代码也是如此。

http://jsfiddle.net/7Wq6v/

$("#main > div").hover(function(){
    $(this).animate({height: "4em", width: "4em", margin: "1em", lineHeight: "4em"},200);
}, function() {
    $(this).animate({height: "2em", width: "2em", margin: "2em", lineHeight: "2em"},200);
});

PS：只有在内联块中有文本或其他内容时才会发生这种情况，如果它是空的，则不会显示奇怪的动画。

Answer 1

将vertical-align: middle;添加到您的CSS。

#main > div {
    display : inline-block;
    vertical-align: middle;
}

http://jsfiddle.net/mblase75/8wBhT/