title: Center Text Below Image in Table
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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!</p>
  
  <p>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.</p>
  
  <p>This image is what I am trying to achieve:
  <img src="https://i.stack.imgur.com/ALMg8.jpg" alt="enter image description here"></p>
  
  <p>TABLE 1 (examples of images that are correctly centered)</p>
  
  <pre><code>&lt;div&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td style="text-align: center;"&gt;
          &lt;a href="#"&gt;&lt;img style="width: 70%; float: left; margin: 25px;" src="https://www.website.com/images/image1.png" /&gt;&lt;/a&gt;
          &lt;p style="font- 
      size:24px;"&gt;CONTENT&lt;/p&gt;
        &lt;/td&gt;
  
        &lt;td style="text-align: center;"&gt;
          &lt;a href="#"&gt;&lt;img style="width:70%; float: left; margin: 25px;" src="https://www.website.com/images/image2.png" /&gt;&lt;/a&gt;
        &lt;/td&gt;
  
        &lt;td style="text-align: center;"&gt;
          &lt;a href="#"&gt;&lt;img style="width: 70%; float: left; margin: 25px;" src="https://www.website.com/images/image3.png" /&gt;&lt;/a&gt;
        &lt;/td&gt;
  
        &lt;td style="text-align: center;"&gt;
          &lt;a href="#"&gt;&lt;img style="width: 70%; float: left; margin: 25px;" src="https://www.website.com/images/image4.png" /&gt;&lt;/a&gt;
        &lt;/td&gt;
  
        &lt;td style="text-align: center;"&gt;
          &lt;a href="#"&gt;&lt;img style="width: 70%; float: left; margin: 25px;" src="https://www.website.com/images/image5.png" /&gt;&lt;/a&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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)</p>
  
  <pre><code>&lt;div&gt;
    &lt;table&gt;
      &lt;tr style="font-size:24px;"&gt;
        &lt;td style="text-align: center;"&gt;
          &lt;span style="width: 70%; float: left; margin: 25px;"&gt;CONTENT 1&lt;/span&gt;
        &lt;/td&gt;
        &lt;td style="text-align: center;"&gt;
          &lt;span style="width: 70%; float: left; margin: 25px;"&gt;CONTENT 2&lt;/span&gt;
        &lt;/td&gt;
        &lt;td style="text-align: center;"&gt;
          &lt;span style="width: 70%; float: left; margin: 25px;"&gt;CONTENT 3&lt;/span&gt;
        &lt;/td&gt;
        &lt;td style="text-align: center;"&gt;
          &lt;span style="width: 70%; float: left; margin: 25px;"&gt;CONTENT 4&lt;/span&gt;
        &lt;/td&gt;
        &lt;td style="text-align: center;"&gt;
          &lt;span style="width: 70%; float: left; margin: 25px;"&gt;CONTENT 5&lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>