添加图像时，为什么 <td> 中的 html 按钮的垂直对齐丢失了？

Question

我有按钮，我通常只添加文本。这样，vert。 <td> 中的按钮对齐没问题。（代码-1）。

但是当我向按钮添加图像时，按钮的对齐方式会丢失。<td> 高度变高，按钮与底部对齐。什么是故障？

.td_button_bar {
  background-color: #eaf2f8;
  border: none;
  left: 10px;
}

.button {
  width: 75px;
  height: 50px;
  background-color: #eaf2f8;
  border: 1px solid;
  border-color: #aed6f1;
  display: inline-block;
  font-size: 13px;
  border-radius: 5px 5px 5px 5px;
  color: #212f3c;
  padding-top: 10px;
}

Code-1 vert.alignment OK:
<table>
  <tr class="tr_button_bar">
    <td class="td_button_bar" align="left" valign="middle">
      &nbsp;<button class="button">Connect</button> &nbsp;
      <button class="button">Disconnect</button>
    </td>
  </tr>
</table>
Code-2 vert.alignment Not OK:
<table>
  <tr class="tr_button_bar">
    <td class="td_button_bar" align="left" valign="middle">
      &nbsp;<button class="button"><img src="https://w7.pngwing.com/pngs/923/71/png-transparent-computer-icons-connect-miscellaneous-angle-technology-thumbnail.png" width="20" height="20" align="middle">Connect</button> &nbsp;
      <button class="button"><img src="https://w7.pngwing.com/pngs/627/934/png-transparent-computer-icons-electrical-connector-ac-power-plugs-and-sockets-plug-in-connect-miscellaneous-computer-program-electrical-connector-thumbnail.png" width="20" height="20" align="middle">Disconnect</button>
    </td>
  </tr>
</table>

Answer 1

添加边距顶部 = 0;和填充= 0 0 0 0；在图像上，这将有助于调整按钮内的图像和文本