https://i.sstatic.net/AetS4.pngI typically include only text on my buttons, which maintains the vertical alignment of the buttons within the <td> element (Code-1).
However, when I add an image to the button, the alignment is thrown off. The height of the <td> increases and the button aligns to the bottom. What could be causing this issue?
.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">
<button class="button">Connect</button>
<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">
<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>
<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>