如何使用javascript，css和/或者html将文本置于表格中的图片中心？
如何使用javascript，css和/或者html在表单元格中的图像上居中显示文本？
我有一个HTML表格，其中包含所有大小相同的图像，并且我想在每个图像上居中放置一个文本标签。标签中的文字大小可能会有所不同。水平居中并不困难，但垂直居中则很困难。
附录：我最终不得不使用javascript，使用具有绝对位置的固定大小的div可靠地使文本居中；我只是无法让它以任何其他方式工作
解决方案
我们可以尝试将图像放在背景中。
<table>
<tr>
<td style="background: url(myImg.jpg) no-repeat; vertical-align: middle; text-align: center">
Here is my text
</td>
</tr>
</table>
我们只需要在单元格上设置高度和宽度即可。
我将通过CSS将图像设置为单元格的背景，将单元格的大小设置为适当的固定值(再次通过CSS)，然后插入文本标签作为单元格内容。默认情况下，表格单元格的内容垂直居中，因此我认为我们不必担心。同样，可以通过CSS轻松设置垂直和水平对齐方式。这种方法之所以有效，是因为我多次使用它。
另一种方法是在表单元格中插入图像和文本，将文本包装在DIV元素中并使用其CSS属性(相对位置和边距)，但这在我看来有点棘手。
我们可以使用TD的选项" valign"，它可以是top，bottom或者居中...但是据我所知，默认情况下，单元格内容在垂直方向上居中，因此CSS可能使它们以bottom或者top选项显示。
<TABLE><TR valign=center> <TD align=center background="some image"> image label </TD> </TR></TABLE>
在CSS中没有正确的方法(尽管应该这样做)。但这是一种对我有用的方法。
CSS：
#image1, #image1-text, #image1-container {
overflow: hidden;
height: 100px;
width: 100px;
}
#image1 {
top: -100px;
position: relative;
z-index: -1;
}
#image1-text {
text-align: center;
vertical-align: middle;
display: table-cell;
}
HTML：
<div id="image1-container">
<img src="image.jpeg" id="image1">
<div id="image1-text">
hello
</div>
</div>
容器中的" image1"和" image1-text"的顺序无关紧要。
这有点麻烦，但它可以在任何地方使用，而不仅仅是在桌子上。但是，它在IE中无法正常工作。它将显示在顶部。但是它可以在FF，Safari和Chrome中运行。尚未在IE8中进行过测试。
对于IE7或者更低版本的hack，只会显示1行，但会居中，是在<head>标记内添加以下内容：
<!--[if lte IE 7]>
<style>
#image1-text {
line-height: 100px;
}
</style>
<![endif]-->
感谢大家的建议。
我确实不得不使用javascript，使用具有绝对位置的固定大小的div可靠地使文本居中；我只是无法让它以任何其他方式工作。
我还必须生成隐藏了可见性的文本div，并在页面末尾具有javascript循环，以使其可见并将其放置在适当的表格单元格上
css / html的布局功能中存在一些严重的漏洞，希望这些漏洞将在以后的版本中解决;-)
