Image failed to align vertically inside td-CodePudding

Please run the very simple snippet below. You can see that spaces on top doesn't equal to spaces on bottom. How to fix it?

<!DOCTYPE html>
<html>

<body>
  <table>
    <tr>
      <td style="height: 20px; border: 1px solid black">
        <img style="height:10px; width:10px; vertical-align: middle; border: 1px solid red;"></image>
      </td>
    </tr>
  </table>
</body>

</html>

EDIT: @James provided a solution that change TD display to flex. Beside this, anyone knows why 'vertical-align' doesn't work in this simple case?

CodePudding user response：

Try assign it to its parent element will work.

A little off-topic suggestion, maybe not use too many inline style, they are too messy.

td{
display: flex;
justify-content: center;
align-items: center;
}

<!DOCTYPE html>
<html>

<body>
  <table>
    <tr>
      <td style="height: 20px; vertical-align: middle;border: 1px solid black">
        <img style="height:10px; width:10px;  border: 1px solid red;"></image>
      </td>
    </tr>
  </table>
</body>

</html>

CodePudding user response：

@James provided a solution that change TD display to flex. Beside this, anyone knows why 'vertical-align' doesn't work in this simple case?

This appears to be associated with an img element being a replaced element.

If we make that element a div instead then it aligns in the vertical direction centrally:

<!DOCTYPE html>
<html>

<body>
  <table>
    <tr>
      <td style="height: 20px; border: 1px solid black">
        <div style="height:10px; width:10px; vertical-align: middle; border: 1px solid red;"></div>
      </td>
    </tr>
  </table>
</body>

</html>

If we give the img display: block it also aligns vertically in the middle:

<!DOCTYPE html>
<html>

<body>
  <table>
    <tr>
      <td style="height: 20px; border: 1px solid black">
        <img style="display: block; height:10px; width:10px; vertical-align: middle; border: 1px solid red;">
      </td>
    </tr>
  </table>
</body>

</html>

Hmm, a workaround but not a complete explanation as I confess to not understanding non block elements fully.