表格中图像下方的中心文本

Question

我构建了一个 HTML 表格并将其中的图像居中（表 1 示例）。 图像将是一个链接，但文本不会是一个链接。 我需要一些帮助将与图像位于同一“td”标签中的文本/标题居中。

我包含了表 2 的代码，但这只是另一个表的示例，该表的内容完全位于您在表 1 中看到的图像下方。我不想要两个表，因为文本在图像下方太远。我需要文本更接近它上面的图像。

我只想要一张表...表 1。我需要一些帮助，在每张图片正下方添加内容/文本/标题。我在表 1 的第一个 td 中添加了一个 p 标记，但这不起作用。

我已经尝试查看其他表格和 css 示例，但我还没有得到好的结果。 任何帮助/建议将不胜感激！

我尝试添加不同的 CSS 样式，包括边距、填充、文本居中对齐等等... 到目前为止，我无法成功地将文本置于图像正下方。

这张图片是我想要实现的：

表 1（正确居中的图像示例）

<div>
  <table>
    <tr>
      <td style="text-align: center;">
        <a href="#"><img style="width: 70%; float: left; margin: 25px;" src="https://www.website.com/images/image1.png" /></a>
        <p style="font- 
    size:24px;">CONTENT</p>
      </td>

      <td style="text-align: center;">
        <a href="#"><img style="width:70%; float: left; margin: 25px;" src="https://www.website.com/images/image2.png" /></a>
      </td>

      <td style="text-align: center;">
        <a href="#"><img style="width: 70%; float: left; margin: 25px;" src="https://www.website.com/images/image3.png" /></a>
      </td>

      <td style="text-align: center;">
        <a href="#"><img style="width: 70%; float: left; margin: 25px;" src="https://www.website.com/images/image4.png" /></a>
      </td>

      <td style="text-align: center;">
        <a href="#"><img style="width: 70%; float: left; margin: 25px;" src="https://www.website.com/images/image5.png" /></a>
      </td>
    </tr>
  </table>
</div>

表 2（内容居中的示例...此内容在图像下方完全居中，但由于垂直间距太大，我不想要两个表）

<div>
  <table>
    <tr style="font-size:24px;">
      <td style="text-align: center;">
        <span style="width: 70%; float: left; margin: 25px;">CONTENT 1</span>
      </td>
      <td style="text-align: center;">
        <span style="width: 70%; float: left; margin: 25px;">CONTENT 2</span>
      </td>
      <td style="text-align: center;">
        <span style="width: 70%; float: left; margin: 25px;">CONTENT 3</span>
      </td>
      <td style="text-align: center;">
        <span style="width: 70%; float: left; margin: 25px;">CONTENT 4</span>
      </td>
      <td style="text-align: center;">
        <span style="width: 70%; float: left; margin: 25px;">CONTENT 5</span>
      </td>
    </tr>
  </table>
</div>

Answer 1

您需要使用的是图形元素和 figcaption 中的文本/链接。 figcaption 可以是 figure 元素中的第一个子元素或最后一个子元素（实际上意味着它可以放置在图像之前或之后。

figure a img {
 width: 70%;
}

<div>
  <table>
    <tr>
      <td style="text-align: center;">
       <figure>
         <a href="#">
           <img src="https://via.placeholder.com/150" />
         </a>
         <figcaption>Content</figcaption>
       </figure>
      </td>
      <td style="text-align: center;">
       <figure>
         <a href="#">
           <img src="https://via.placeholder.com/150" />
         </a>
         <figcaption>Content</figcaption>
       </figure>
      </td>
      <td style="text-align: center;">
       <figure>
         <a href="#">
           <img src="https://via.placeholder.com/150" />
         </a>
         <figcaption>Content</figcaption>
       </figure>
      </td>
     </tr>
   </table>
</div>

Answer 2

当我加载您的代码时，它似乎居中很好，除了图像上的float:left 可以将其丢弃（请参阅my example。右侧的图像向左浮动并且看起来不居中）。

如果您仍然想要图像下方的文本，则不需要float:left，因为这会使图像位于其后任何元素的左侧。根据图片大小，带有 CONTENT 文本的段落将移到图片旁边而不是图片下方。

确实最好使用外部样式表，因为您的所有内联代码都很难跟踪。另外，图片上的margin:25px会根据margin大小放大或缩小图片：margin扩大或缩小表格单元格，70%的固定宽度使图片随单元格大小移动以保持margin相同。

别忘了你有 cellspacing 和 cellpadding 属性来调整表格单元格之间的宽度，以及单元格中项目周围的空间：<table cellspacing="15"> 将在单元格之间放置 15 像素的缓冲。

更新：对于较长的字幕将图像向上推的问题，一个简单的解决方案是将所有字幕放在自己的表格行中。这仍然只使用一个表格，并且可以使用负 CSS 边距调整标题和图像之间的距离。 Example here。

Answer 3

更新后的代码使用 p 标记作为标题，使标题在图像下方居中，但如果标题有太多字符，您会看到 td 元素与其他 td 元素不对齐。

long character example

<div>
<table>
<tbody><tr>

<td style="text-align: center;"><a href="#"><img style="width: 70%;/* float: left; *//* margin: 25px; */" src="https://www.website.com/images/image1.png" /></a>
<p style="font-size: 21px; font-weight: bold;">HEADLINE</p> 
</td>

<td style="text-align: center;"><a href="#"><img style="width:70%;/* float: left; *//* margin: 25px; */" src="https://www.website.com/images/image2.png" /></a>
<p style="font-size: 21px; font-weight: bold;">LONG HEADLINE</p> 
</td>

<td style="text-align: center;"><a href="#"><img style="width: 70%;/* float: left; *//* margin: 25px; */" src="https://www.website.com/images/image3.png" /></a>
<p style="font-size: 21px; font-weight: bold;">HEADLINE</p> 
</td>
<td style="text-align: center;"><a href="#"><img style="width: 70%;/* float: left; *//* margin: 25px; */" src="https://www.website.com/images/image4.png" /></a>
<p style="font-size: 21px; font-weight: bold;">HEADLINE</p> 
</td>

<td style="text-align: center;"><a href="#"><img style="width: 70%;/* float: left; *//* margin: 25px; */" src="https://www.website.com/images/image5.png" /></a>
<p style="font-size: 21px; font-weight: bold;">HEADLINE</p> 
</td>

</tr>
</tbody></table>
</div>