Center Text Below Image in Table

Question

I built an HTML table and centered the images within it (TABLE 1 example). The image will be a link, but the text will not be a link. I need some help centering text/headline that is in the same "td" tag as an image.

I included code for TABLE 2, but this is just an example of another table that has the CONTENT perfectly centered below the image you see in TABLE 1. I do not want two tables because the text is too far below the image. I need the text to be closer to the image above it.

I only want one table...TABLE 1. And I need some help adding content/text/headline directly below each image. I added a p tag in the first td of TABLE 1, but that is not working.

I have tried looking at other table and css examples, but I have not had good results yet. Any help/suggestions will be greatly appreciated!

I have tried adding different CSS styles including margin, padding, text align center, and so on... So far I not been able to successfully center the text right below the image.

This image is what I am trying to achieve:

TABLE 1 (examples of images that are correctly centered)

<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>

TABLE 2 (examples of centering CONTENT...this content is centered perfectly below the images, but I do not want two tables due to vertical spacing is too much)

<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

It seems to be centered fine when I load your code, except the float:left on the image can throw it off (see my example. The image on the right is floated left and doesn't look as centered).

If you want the text under the image anyway, there's no need for float:left because that makes the image sit to the left of any elements after it. Depending on image size, the paragraph with the CONTENT text will move next to the image instead of below it.

Really it would be best to use an external stylesheet, all your inline code is hard to keep track of. Also, the margin:25px on the image will enlarge or shrink the image depending on the margin size: The margin expands or shrinks the table cell, and the 70% fixed width makes the image move with the size of the cell to keep the margin the same.

Don't forget you have cellspacing and cellpadding attributes to adjust the width between table cells, and the space around items in the cells: <table cellspacing="15"> will put 15 pixels cushion between cells.

Update: For the problems with longer captions pushing the image up, an easy solution is to put all the captions in their own table row. This still only uses one table, and the distance between the captions and the images can be adjusted with negative CSS margins. Example here.

Answer 2

This updated code using the p tag for the headline works with centering the headline under the image, but if a headline has too many characters you can see that td element does not align with the other td elements.

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>

Answer 3

What you need to use is a figure element and the text / link in a figcaption. The figcaption can be the first child or last child in the figure element (effectively meaning it can be placed before or after the image.

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>