Javascript 鼠标悬停时将图像居中

我有几个相邻的表格（第1行有3个表格，第2行有3个表格，第3行有1个表格），当我将鼠标悬停在表格单元格上时，屏幕中央会显示一些图像。这就是它当前的样子（切换到完整页面）：

函数图像显示（id）{
document.getElementById（id）.style.visibility=“可见”；
document.getElementById（'lightBox'）.style.visibility=“visible”；
}
函数（id）{
document.getElementById（id）.style.visibility=“hidden”；
document.getElementById（'lightBox'）.style.visibility=“hidden”；
}

.tool2{
边界塌陷：塌陷；
边界间距：0；
左边距：20px；
}
.tool2 td{
宽度：1%；
字体大小：粗体；
字体系列：Arial，无衬线；
字体大小：14px；
填充：10px 5px；
边框样式：实心；
边框宽度：1px；
溢出：隐藏；
断字：正常；
边框颜色：黑色；
}
.2号{
宽度：1%；
字体系列：Arial，无衬线；
字体大小：16px；
字体大小：正常；
填充物：5px 5px；
边框样式：实心；
边框宽度：1px；
溢出：隐藏；
断字：正常；
边框颜色：黑色；
}
.2.边界{
字体系列：Arial，Helvetica，sans serif！重要；
;
边框颜色：#333；
文本对齐：居中
}
.工具2.收割台{
字体系列：Arial，Helvetica，sans serif！重要；
;
背景色：#333；
颜色：#ffffff；
边框颜色：#000000；
文本对齐：居中
}
.包装纸{
位置：相对位置；
z指数：1；
宽度：100%；
高度：50vh；
}

表1
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表2
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表3
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表4
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表5
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表6
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表7
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表8
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘

您的内联CSS在2

OCR

td标签上不相同。这就是你有这个问题的原因

函数图像显示（id）{
document.getElementById（id）.style.visibility=“可见”；
document.getElementById（'lightBox'）.style.visibility=“visible”；
document.getElementsByClassName（“包装器”）[0].style.position=“static”；
}
函数（id）{
document.getElementById（id）.style.visibility=“hidden”；
document.getElementById（'lightBox'）.style.visibility=“hidden”；
document.getElementsByClassName（“包装器”）[0].style.position=“relative”；
}

.tool2{
边界塌陷：塌陷；
边界间距：0；
左边距：20px；
}
.tool2 td{
宽度：1%；
字体大小：粗体；
字体系列：Arial，无衬线；
字体大小：14px；
填充：10px 5px；
边框样式：实心；
边框宽度：1px；
溢出：隐藏；
断字：正常；
边框颜色：黑色；
}
.工具2{
宽度：1%；
字体系列：Arial，无衬线；
字体大小：16px；
字体大小：正常；
填充物：5px 5px；
边框样式：实心；
边框宽度：1px；
溢出：隐藏；
断字：正常；
边框颜色：黑色；
}
.2.边界{
字体系列：Arial，Helvetica，sans serif！重要；
;
边框颜色：#333；
文本对齐：居中
}
.工具2.收割台{
字体系列：Arial，Helvetica，sans serif！重要；
;
背景色：#333；
颜色：#ffffff；
边框颜色：#000000；
文本对齐：居中
}
.包装纸{
位置：相对位置；
z指数：1；
宽度：100%；
高度：50vh；
}

表1
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表2
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表3
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表4
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表5
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表6
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘
表7
发票
电子邮件
情绪分析
客户关系管理
光学字符识别
田间采摘

首先谢谢。我复制了我的项目中的所有3个部分，但是图像没有居中，只是在代码片段中？在我的页面上，所有图像都在屏幕的左侧。检查图像标签上的样式。应该是这样的：

style=“z-index:100；位置：绝对；顶部：50%；左侧：50%；变换：平移（-50%，-50%）；可见性：隐藏；“

其次，从您的

id

属性中删除间距。所有样式都匹配。id标签中的空白也被删除（与您的答案中的html相同）@cole它现在可以工作了吗？正如在这里的代码片段中，它正在正确工作