Nrc Nrc - 18 days ago 6
CSS Question

Display block inside a table

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

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>

Comments