Javascript 如何停止按钮晃动并使其在div中居中？

我一直在尝试让这个简单的菜单示例运行，但我有两个问题

按钮在悬停时摆动

悬停框内的图像/文本未居中

非常感谢您愿意提供的任何帮助。我真的想知道我做错了什么，所以你能提供的任何解释都会非常棒

酷按钮菜单示例
#CoolButtonPMenu.divButtons{
浮动：左；
填充：3倍；
保证金：2倍；
边框：3倍纯白；
高度：65px；
}
#coolButtonTtopMenu.divButtons img{
利润上限：-15px；
}
#CoolButtopMenu.btnSmall{
填充：3倍；
浮动：左；
保证金：自动；
保证金：2倍；
}
#coolButtonTopMenu.btnSmallText{
字体系列：“verdana”无衬线；
字体大小：x-small；
填充：3倍；
宽度：45px；
文本对齐：居中；
}
#CoolButtonPMenu.divButtons:悬停{
/*边框：3个点#F59595*/
填充：3倍；
保证金：2倍；
/*背景色：#F5959595*/
高度：65px；
}
#CoolButtonPMenu.Diva按钮{
文字装饰：无；
颜色：黑色；
显示：块；
}
#coolButtonTopMenu.Diva按钮：活动{
边框顶部：0px实心橙色；
文字装饰：无；
}
#CoolButtonPMenu.mnuWorkQueueMain{
浮动：左；
}
#CoolButtonPMenu.mnuWorkQueueMain:悬停{
边框：3个点#F59595；
}
//工作职能
函数doSomething（）{
警报（'按钮已单击…'）；
}
当您将鼠标悬停在按钮上时所面临的问题是，边框会占用空间，并且在您悬停时会应用该边框，从而创建“摆动”。为了解决这个问题，您可以考虑从边框移走，而不是使用<代码>大纲>代码>，这不会增加大小。

就内容居中而言，您需要应用
text align:center
到您希望其子元素居中的父元素。在您的情况下，您可以将此规则应用于
#coolbuttonopmenu.divButtons


//执行工作的函数
函数doSomething（）{
警报（'按钮已单击…'）；
}
#coolButtonTopMenu.divButtons{
浮动：左；
填充：3倍；
保证金：2倍；
边框：3倍纯白；
高度：65px；
文本对齐：居中；
}
#coolButtonTtopMenu.divButtons img{
/*利润上限：-15px*/
}
#CoolButtopMenu.btnSmall{
填充：3倍；
/*浮动：左*/
保证金：自动；
/*保证金：2倍*/
}
#coolButtonTopMenu.btnSmallText{
字体系列：“verdana”无衬线；
字体大小：x-small；
/*填充：3倍*/
宽度：45px；
文本对齐：居中；
}
#CoolButtonPMenu.divButtons:悬停{
/*边框：3个点#F59595*/
填充：3倍；
保证金：2倍；
/*背景色：#F5959595*/
高度：65px；
}
#CoolButtonPMenu.Diva按钮{
文字装饰：无；
颜色：黑色；
显示：块；
}
#coolButtonTopMenu.Diva按钮：活动{
边框顶部：0px实心橙色；
文字装饰：无；
}
#CoolButtonPMenu.mnuWorkQueueMain{
浮动：左；
保证金：3倍；
}
#CoolButtonPMenu.mnuWorkQueueMain:悬停{
外形：3px虚线#F59595；
}

新请求

新事物

第一期的副本：谢谢亚当，谢谢你的帮助。