Home Why is the vertical alignment of my html button in a <td> lost when I add an image?

Questions

Why is the vertical alignment of my html button in a <td> lost when I add an image?

October 4, 2022

I have buttons where I have normally added just text. In this way the vert. alignment of the buttons in the <td> is ok.(Code-1).

But when I add also an image to the button, then the alignment of the button is lost.The <td> height gets higher and the button is aligned to the bottom. What is faulty?

.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>