Nrc Nrc - 1 year ago 67
CSS Question

Display block inside a table

Images usually have a gap below them. To avoid that, I give them

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:

<table style="margin:0 auto; width:80%;">
<td style="background-color:gray">
<img style="display:block; margin:0; padding:0; text-align:center;" src="">

Answer Source

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;
      <img src="">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download