css - 在表格内显示 block

Question

图片下方通常有一个空隙。为避免这种情况，我给了它们 display:block 但如果我在表格中这样做，图像会向左移动。

如何让图片居中且下方没有空隙？

(我使用内联 CSS，因为我在邮件中使用它)

我在这里播放: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

您可以使用 margin:0 auto 而不是 text-align 来使图像居中。它适用于 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>