如何在 HTML/CSS 中的每个图像上制作带有文本的图像表？答案

【问题标题】：How do I make table of images with text over each image in HTML/CSS?如何在 HTML/CSS 中的每个图像上制作带有文本的图像表？
【发布时间】：2020-03-28 02:13:29
【问题描述】：

我正在制作一个网站，我必须制作一组图像，每个图像上都有一个文字。我制作了一个<table>，但是当我将<p> 添加到每张图片时，它们变成了一列而不是一张表格。

使<p> 的位置绝对没有帮助。

如何在保存表格位置的同时将每个<p> 链接到图像的中间？

【问题讨论】：

标签： html css image web

【解决方案1】：

如果您想使用表格而不是 div，请尝试这样的操作 - 这将使文本在每个表格单元格中的每个图像上居中：

<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<table >
<td class="container">
  <img src="image.jpg" alt="" style="width:100%;">
  <div class="centered">Centered</div>
  </td>

  <td class="container">
  <img src="image.jpg" alt="" style="width:100%;">
  <div class="centered">Centered</div>
  </td>

    <td class="container">
  <img src="image.jpg" alt="" style="width:100%;">
  <div class="centered">Centered</div>
  </td>
</table>

</body>
</html>

【讨论】：

谢谢:) 但是这样表格仍然可以作为一列工作，所有文本都直接位于中心的 1 个位置，但我有 5 张图像，我需要将每个图像的文本居中其中之一
在我的示例中有 3 列，每列有 1 个图像和居中的文本。你的意思是你想要 1 个表格单元格中的 5 个图像？任何您想要实现的屏幕截图或示例都可能会有所帮助

我正在为这个网站制作网站的人，想要一张图片链接表。比如，3-4 列有 2 行图像。这是我正在尝试做的愚蠢绘图：D imgbbb.com/image/LXSibc 我做了所有的事情，但图像仍然只是一列

好的，我已经制作了一个

容器而不是

容器，而且效果很好。非常感谢:)

是的，那是我的原始代码，但我用你想要的表替换了它:) 很高兴它可以工作。觉得有帮助的可以采纳我的回答