Image failed to align vertically inside td
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?
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>