Question

我建立了一个HTML表并将图像居中（表1示例）。该图像将是一个链接，但文本将不是一个链接。我需要一些帮助将文本/标题居中放置在与图像相同的“ td”标签中。

我包括了表2的代码，但这只是另一个表的示例，该表的内容完全位于表1所示图像的下方。我不希望有两个表，因为文本在图像下方太远了。我需要使文字更接近上方的图像。

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

我尝试查看其他表和CSS示例，但尚未取得良好的结果。任何帮助/建议将不胜感激！

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

此图像是我要实现的目标： enter image description here

表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 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，因为这会使图像位于其后任何元素的左侧。根据图像的大小，带有内容文本的段落将移到图像旁边而不是图像下方。

确实，最好使用外部样式表，因为很难跟踪所有内联代码。此外，图像上的margin:25px会根据边距大小来放大或缩小图像：边距会扩大或缩小表格单元格，并且70％的固定宽度使图像随着单元格的大小而移动保证金相同。

别忘了您拥有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>

表格中图片下方的中心文字

3 个答案: