title: How to center align a <td> in a <tr>?
body: <p>I have the following code, which shows four images in a table. The reason for the <code>float: left;</code> CSS is so that they wrap. <a href="https://jsfiddle.net/m4d4cmaa/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
  
          &lt;td style="float: left; padding: 20px;"&gt;
              &lt;img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=600%C3%97300&amp;w=600&amp;h=300" /&gt;
              &lt;div style="padding-top: 30px;"&gt;TEST TEXT #1&lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td style="float: left; padding: 20px;"&gt;
              &lt;img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=600%C3%97300&amp;w=600&amp;h=300" /&gt;
              &lt;div style="padding-top: 30px;"&gt;TEST TEXT #2&lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td style="float: left; padding: 20px;"&gt;
              &lt;img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=600%C3%97300&amp;w=600&amp;h=300" /&gt;
              &lt;div style="padding-top: 30px;"&gt;TEST TEXT #3&lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td style="float: left; padding: 20px;"&gt;
              &lt;img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=600%C3%97300&amp;w=600&amp;h=300" /&gt;
              &lt;div style="padding-top: 30px;"&gt;TEST TEXT #4&lt;/div&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>However, they currently are fixed to the left of the table row (which is understandable, hence the <code>float: left</code> CSS). However, is there a way that I can get the wrapping effect of the floating while having the &lt;td&gt; elements center aligned inside the &lt;tr&gt; element?</p>
  
  <p>And yes, I do have to use a table.</p>