如何使用javascript、css和/或html使文本在表格中的图像上居中？

Question

如何使用javascript、css和/或html在表格单元格中的图像上居中显示文本？

我有一个包含图像的HTML表-所有图像的大小都相同-并且我想在每个图像上居中放置一个文本标签。标签中的文本大小可能不同。水平居中并不难，但垂直居中却很难。

附录:我最终不得不使用javascript使用固定大小的div和绝对定位来可靠地将文本居中；我只是无法让它以任何其他方式工作。

Answer 1

您可以尝试将图像放在背景中。

<table>
    <tr>
        <td style="background: url(myImg.jpg) no-repeat; vertical-align: middle; text-align: center">
            Here is my text
        </td>
    </tr>
</table>

您只需要设置单元格的高度和宽度，应该就是这样。

Answer 2

在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或更小版本的一个技巧是在<head>标记内添加以下内容：

<!--[if lte IE 7]>
<style>
  #image1-text {
    line-height: 100px;
  }
</style>
<![endif]--> 

Answer 3

我将通过CSS将图像设置为单元格的背景，将单元格的大小设置为适当的固定值(同样通过CSS)，然后插入文本标签作为单元格内容。默认情况下，表单元格的内容是垂直居中的，所以我认为您不必担心这一点。同样，可以通过CSS轻松设置垂直和水平对齐方式。这种方法之所以有效，是因为我应用了很多次。

另一种方法是在表单元格中同时插入图像和文本，将文本包装在DIV元素中并处理其CSS属性(相对位置和边距)，但在我看来这有点棘手。