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 >
<td align="left" valign="middle">
<button >Connect</button>
<button >Disconnect</button>
</td>
</tr>
</table>
Code-2 vert.alignment Not OK:
<table>
<tr >
<td align="left" valign="middle">
<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 ><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>
CodePudding user response:
Add margin-top = 0;
and padding = 0 0 0 0;
on image that will help to adjust your image and text inside the button.