如何使用javascript,css和/或html将文本中心放在表格中的图像上？

<style>
  table {
    width: 100%;
  }
  table, th, td {
    border: 1px solid black;
    padding: 10px;
  }
  th, td {
    text-align: center;
  }
  img {
    width: 100px;
    height: auto;
    margin: auto;
  }
</style>

<table>
  <tr>
    <th>Title</th>
  </tr>
  <tr>
    <td>
      <img src="sample.jpg" alt="Sample Image">
      <h1>This is a centered header</h1>
    </td>
  </tr>
</table>

<style>
  table {
    width: 100%;
  }
  table, th, td {
    border: 1px solid black;
    padding: 10px;
  }
  th, td {
    text-align: center;
  }
  img {
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 100px;
    margin: auto;
  }
</style>

<script>
  function resizeImage() {
    var img = document.querySelector('img');
    var maxWidth = 100;
    var minHeight = 40;
    var height = img.naturalHeight;
    if (height < minHeight) {
      height = minHeight;
    }
    if (height > maxWidth) {
      height = maxWidth;
    }
    while (height > maxWidth / 2) {
      height /= 2;
      width += 20;
    }
    img.style.width = width + 'px';
    img.style.height = height + 'px';
  }
</script>

<table>
  <tr>
    <th>Title</th>
  </tr>
  <tr>
    <td>
      <img src="sample.jpg" alt="Sample Image" onload="resizeImage()">
      <h1>This is a centered header</h1>
    </td>
  </tr>
</table>