table-cell > img extra 4px space

Question

The question is similar to this one: Extra spacing after an A Tag/img tag? But the solution was to apply display:block to the image but if I do it, my vertical-align is lost.

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

fiddle: http://jsfiddle.net/Zf34P/ img height: 32px, parent div height: 36px. Can't find a way to remove it and keep vertical-align: middle; text-align: center; so the image is centered. These 4 pixels are really annoying when the image height is set to window's height via JavaScript so scrollbar appears. Any ideas how to remove it? Thanks.

Answer 1

When you set your image to a block element you have to center it as a block element with margin: 0 auto.

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

@Yoann's solution also works, but the flex value is not supported by every browser. Have a look at the MDN docs for more information about browser support and values of display.

Answer 2

If you are ok to use margin:auto instead of text-align:center. The display:flex should make the deal.

display:flex

http://jsfiddle.net/LG68Q