table-cell > img extra 4px space

Issue

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.

Solution

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.

Answered By – Eich

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published