Javascript Div在向其添加img时更改大小

我在一个页面上制作的按钮看起来像应用程序图标，我把div放在一个表中来组织它们，在div内我想放一个像小图标的图像，然后在下面放一个文本，但是当我添加图像时，div的大小会改变，并与它所在的表发生冲突

该表位于一个名为container的div中，该div设置为屏幕的100%宽度和高度

/*导航按钮的表格*/
表#按钮表{
位置：相对位置；
利润率：7.5%自动0自动；
宽度：90%；
身高：68%；
填充：0；
背景色：#444；
边界半径：25px；
}
/*导航按钮*/
分区导航按钮{
位置：相对位置；
背景色:#282828 ;；
宽度：55%；
身高：55%；
保证金：0；
填充：0；
边界半径：25px；
盒影：0 0 20px#1c1c插图；
-网络工具包盒阴影：0 0 20px#1c1c插图；
-moz盒阴影：0 0 20px#1c1c插入；
-ms盒阴影：0 0 20px#1c1c插图；
}
img#mg{
位置：相对位置；
宽度：20%；
高度：自动；
垂直对齐：顶部；
}
/*导航按钮中的文本*/
p、 导航按钮文本{
位置：相对位置；
颜色：#008080；
保证金：0；
填充：0；
最高：75%；
字体大小：200%；
}

计算器

设置提示

/*导航按钮的表格*/
表#按钮表{
位置：相对位置；
利润率：7.5%自动0自动；
宽度：90%；
身高：68%；
填充：0；
背景色：#444；
边界半径：25px；
}
/*导航按钮*/
分区导航按钮{
位置：相对位置；
背景色:#282828 ;；
宽度：45%；
高度：自动；
保证金：0；
填充：0；
边界半径：25px；
盒影：0 0 20px#1c1c插图；
-网络工具包盒阴影：0 0 20px#1c1c插图；
-moz盒阴影：0 0 20px#1c1c插入；
-ms盒阴影：0 0 20px#1c1c插图；
}
img#mg{
位置：相对位置；
宽度：65%；
高度：自动；
垂直对齐：中间对齐；
}
/*导航按钮中的文本*/
p、 导航按钮文本{
位置：相对位置；
颜色：#008080；
保证金：0；
填充：0；
字体大小：120%；
}
表tr td{
宽度：200px；
高度：230像素；
}

计算器

设置提示

也许你想改为

p.navbuttonText{position:absolute；}

？将位置更改为absolute不会有任何区别，而且如果文本太长，它会使div变大，就像变形的Picures一样。你只更改了css的底部位吗？如果是，我可以用百分比表示宽度和高度吗？@AaronVance我还修改了字体大小，并调整了示例的宽度。在添加图像后更改高度、宽度和字体大小，以便进行测试。非常感谢，它实现了一个梦想！我花了整整一个晚上看这个，却没能让它发挥作用@阿伦万斯：我很高兴这有帮助：）