title: Align text underneath image within table structure
body: <p>I am trying to make a media library template in HTML &amp; CSS, where I can add images to a table. I wish to add a caption directly underneath the images.</p>
  
  <p>But my output is currently wrong. I get: </p>
  
  <p><img src="https://i.stack.imgur.com/72BTv.png" alt="enter image description here"></p>
  
  <p>The text is aligned wrong, I cannot find a way to get the text directly under and centered underneath the image.</p>
  
  <p>Here is my code template:</p>
  
  <pre><code>&lt;div align="center" class="tile_div"&gt;
  &lt;table class="tile_table"&gt;
  &lt;tr&gt;
      &lt;td&gt;
          &lt;img class="tile_image" height="60px" width="60px" src="default.jpg"/&gt; 
          &lt;p class="tile_p"&gt;Sound&lt;/p&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
      &lt;td&gt;
          &lt;img class="tile_image" height="60px" width="60px" src="default.jpg"/&gt; 
          &lt;p class="tile_p"&gt;Sound&lt;/p&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
      &lt;td&gt;
          &lt;img class="tile_image" height="60px" width="60px" src="default.jpg"/&gt; 
          &lt;p class="tile_p"&gt;Sound&lt;/p&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
      &lt;td&gt;
          &lt;img class="tile_image" height="60px" width="60px" src="default.jpg"/&gt; 
          &lt;p class="tile_p"&gt;Sound&lt;/p&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>My CSS is:</p>
  
  <pre><code>.tile_div{
      text-align: center;
      width: 100%;
  }
  
  .tile_table{
      border-collapse:collapse;
  }
  
  .tile_table tr, td{
  }
  
  .tile_image{
      padding: 5px 5px 5px 5px;
      margin: 5px 5px 5px 5px;
  }
  
  .tile_p{
      display: inline;
  }
  </code></pre>
  
  <p>Can anyone help with a solution to this problem?</p>