提问人：Steven A. Lowe 提问时间：9/18/2008 最后编辑：Steven A. Lowe 更新时间：1/15/2016 访问量：25564
如何使用javascript、css和/或html在表格中的图像上居中文本？
How to center text over an image in a table using javascript, css, and/or html?
问：
如何使用javascript、css和/或html在表格单元格中将文本居中？
我有一个包含图像的 HTML 表格 - 所有图像的大小都相同 - 我想在每个图像上居中放置一个文本标签。标签中的文本大小可能有所不同。水平居中并不难，但垂直居中却是。
附录：我最终不得不使用 javascript 使用具有绝对定位的固定大小的 div 可靠地将文本居中;我只是无法让它以任何其他方式工作
答：
11赞
nickf
9/18/2008
#1
您可以尝试将图像放在背景中。
<table>
<tr>
<td style="background: url(myImg.jpg) no-repeat; vertical-align: middle; text-align: center">
Here is my text
</td>
</tr>
</table>
您只需要设置单元格的高度和宽度，就应该就是这样了。
0赞
Dario Solera
9/18/2008
#2
我会通过CSS将图像设置为单元格的背景，将单元格的大小设置为适当的固定值（再次通过CSS），然后插入文本标签作为单元格内容。默认情况下，表格单元格的内容是垂直居中的，所以我认为您不必担心。同样，可以通过CSS轻松设置垂直和水平对齐。这种方法之所以有效，是因为我应用了很多次。
另一种方法是在表格单元格中插入图像和文本，将文本包装在 DIV 元素中并玩弄其 CSS 属性（相对位置和边距），但在我看来这有点棘手。
0赞
sdkpoly
9/18/2008
#3
您可以使用TD的选项“valign”，它可以是顶部、底部或中心......但据我所知，默认情况下单元格内容是垂直居中的，所以可能你的CSS使它们显示底部或顶部选项。
<TABLE><TR valign=center>
<TD align=center background="some image"> image label </TD>
</TR></TABLE>
评论
0赞
Sam Murray-Sutton
9/18/2008
如果您已经在使用 CSS，那么最好为 td 设置 text-align 属性，前提是它是文本或您尝试定位的内联元素。
0赞
sdkpoly
9/18/2008
Steven 还要求提供 HTML 解决方案，所以它是 HTML。不是每个人都必须使用 xhtml。
0赞
Steven A. Lowe
9/19/2008
sdkpoly 是正确的，我不在乎解决方案是 HTML、CSS、JavaScript 还是其他什么 - 我对这些事情不虔诚，我只是希望它始终如一地工作
1赞
Vincent McNabb
9/19/2008
#4
在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>
容器中 和 的顺序无关紧要。image1image1-text
这有点黑客攻击，但它可以在任何地方使用，而不仅仅是在桌子上。但是，它在 IE 中无法正常工作。它将在顶部显示它。但它适用于 FF、Safari 和 Chrome。尚未在 IE8 中进行测试。
IE7 或更低版本的黑客，它只会显示 1 行，但它将居中是在标签内添加以下内容：<head>
<!--[if lte IE 7]>
<style>
#image1-text {
line-height: 100px;
}
</style>
<![endif]-->
0赞
Steven A. Lowe
11/13/2008
#5
感谢大家的建议。
我最终不得不使用 JavaScript 使用具有绝对定位的固定大小的 div 可靠地将文本居中;我只是无法让它以任何其他方式工作。
我还必须生成隐藏可见性的文本 div，并在页面末尾有一个 javascript 循环，以使它们可见并将它们放在适当的表格单元格上
CSS/HTML 的布局功能存在一些严重的漏洞，希望这些漏洞将在未来的版本中得到解决;-）
评论