CSS: не точно Вертикальное выравнивание в таблице

Question

Я считаю, что если я поместить изображение внутри ячейки таблицы, как это (JSFiddle):

<table style="height: 300px; border: 1px solid black"> 
    <tr> 
     <td><img src="https://www.google.com.hk/images/srpr/logo11w.png" /></td> 
    </tr> 
</table> 

Там будет небольшое пространство под изображением, что делает вертикальную Align не точно:

знает любой, что здесь происходит?

Я попытался добавить vertical-align: middle в td, но это не имеет значения.

Answer 1

Вы пытались добавить display: block в элемент img? Кажется, устраняет большинство проблем для вещей в таблицах.

img { 
 
    display: block; 
 
}

<table style="height: 300px; border: 1px solid black"> 
 
    <tr> 
 
    <td> 
 
     <img src="https://www.google.com.hk/images/srpr/logo11w.png" /> 
 
    </td> 
 
    </tr> 
 
</table>

JSFiddle

Answer 2

Вы должны установить IMG, как "дисплей: блок"

img {display:block} 

http://jsfiddle.net/91beLce7/4/

Answer 3

Попробуйте Fiddle

*{ 
    margin: 0; 
    padding: 0; 
} 
table tr td img{ 
    display: block; 
} 

Answer 4

Вы можете исправить это с line-height: .8em;

Answer 5

Попробуйте так: Demo

* { 
    margin: 0; 
    padding: 0; 
} 
table { 
    background:red; 
    height: 300px; 
    border: 1px solid black; 
} 
tr { 
    background:#ccc; 
} 
img { 
    background:green; 
    display: block; 
}