Display block inside a table - css

Question

Images usually have a gap below them. To avoid that, I give them display:block but if I do that in a table, the image goes to the left.
How to have the image in the center and with no gap below it?
(I use inline CSS because I use it in a mail)
I have it here to play: https://jsfiddle.net/rc6jzvx2/
<table style="margin:0 auto; width:80%;">
<tr>
<td style="background-color:gray">
<img style="display:block; margin:0; padding:0; text-align:center;" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</table>

Answer 1

You can use margin:0 auto instead of text-align to center the image. It works fine with display:block:
<table style="margin:0 auto; width:80%;">
<tr>
<td style="background-color:gray">
<img style="display:block; margin:0; padding:0; margin:0 auto;" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</tr>
</table>

Answer 2

You can get rid of the gap below the image and center it by setting the vertical-align property of the image to top and setting the text align to center on the table cell, not the image:
table {
margin: 0 auto;
width: 80%;
}
td {
background-color: gray;
text-align: center;
}
img {
vertical-align: top;
}
<table>
<tr>
<td>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</tr>
</table>

Answer 3

<table style="margin:0 auto; width:80%;">
<tr>
<table style="margin:0 auto; width:80%;">
<tr>
<td >
<div style="background-color:gray;text-align:center">
<img style="" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</div>
</td>
</table>
</table>

Answer 4

EDIT:
If you use it for a mail, as I just read, then it is fine to use the inline-styles.
SOLUTION:
You can just use display: block and margin: 0 auto; in your image for it to center in its container.
You can create a class which you can later on keep using when you need the same style for different images:
.img-center {
display: block;
margin: 0 auto;
}
Also, I recommend you remove your inline-styles and add them in an external css file for separation of concerns and reusability.
JSFIDDLE
CODE SNIPPET:
.my-table {
margin: 0 auto;
width: 80%;
}
.img-center {
display: block;
margin: 0 auto;
}
.bg-gray {
background-color: gray;
}
<table class="my-table">
<tr>
<td class="bg-gray">
<img class="img-center" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</table>