css - 对齐表格中的图像

Question

我需要帮助将这三张图片与每张图片下方居中的文本水平对齐。我尝试了几种不同的 css 方法，但它只是垂直对齐所有内容

<article>
  <table>
    <tr>
      <th>
        <img src="images/index_cws.jpg" alt="Costal Water Scenes" height="350" width="350" />
      </th>
      <th>
        <img src="images/index_ss.jpg" alt="Street Scenes" height="350" width="350" />
      </th>
      <th>
        <img src="images/index_ws.jpg" alt="Window Sunrises" height="350" width="350" />
      </th>
      <tr/>
      <tr>
        <th>
          Costal Water Scenes
        </th>
        <th>
          Street Scenes
        </th>
        <th>
          Window Sunrises
        </th>
      </tr>
  </table>
</article>

Answer 1

这是你要找的吗？

article, td {
  text-align: center;
}
table {
  display: inline-table;
}

<article>
  <table>
    <tr>
      <td>
        <img src="http://placehold.it/200/66f" alt="Costal Water Scenes" height="350" width="350" />
      </td>
      <td>
        <img src="http://placehold.it/200/6f6" alt="Street Scenes" height="350" width="350" />
      </td>
      <td>
        <img src="http://placehold.it/200/f66" alt="Window Sunrises" height="350" width="350" />
      </td>
      <tr/>
      <tr>
        <td>
          Costal Water Scenes
        </td>
        <td>
          Street Scenes
        </td>
        <td>
          Window Sunrises
        </td>
      </tr>
  </table>
</article>