时间戳

首页 > 解决方案 > 表格中图像下方的中心文本

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

问题描述

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

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

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

我曾尝试查看其他表格和 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>

标签： htmlcsshtml-table

解决方案

您需要使用的是图形元素和 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>

推荐阅读