table-cell> img extra 4px space

Question

Вопрос такой же: Extra spacing after an A Tag/img tag? Но решение было применить дисплей: блок к изображению, но если я это сделаю, мой вертикальный вылет потерян.

<div class="main" style="display:table;"> 
    <div style="display:table-cell;"> 
     <img src="http://www.w3schools.com/images/w3logotest2.png" /> 
    </div> 
</div> 

скрипку: http://jsfiddle.net/Zf34P/ высота IMG: 32px, высота родительского DIV: 36px. Невозможно найти способ удалить его и сохранить vertical-align: middle; text-align: center;, чтобы изображение было центрировано. Эти 4 пикселя действительно раздражают, когда высота изображения установлена ​​на высоту окна через JavaScript, поэтому появляется полоса прокрутки. Любые идеи, как удалить его? Благодарю.

Answer 1

Когда вы установите изображение в блок элемента вам необходимо отцентрировать его в качестве элемента блока с margin: 0 auto.

http://jsfiddle.net/LG68Q/2/

@ решение Йоанна также работает, но значение flex не поддерживается каждым браузером. Посмотрите на MDN docs для получения дополнительной информации о поддержке браузера и значениях display.

Answer 2

Если у вас нормально использовать margin: auto вместо text-align: center. Дисплей: flex должен заключить сделку.

display:flex 

http://jsfiddle.net/LG68Q