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.

If you are ok to use margin:auto instead of text-align:center. The display:flex should make the deal. http://jsfiddle.net/LG68Q/ — Yooz, Jan 23 '14 at 01:44
http://jsfiddle.net/LG68Q/2/ use ```display:block``` with ```margin: 0 auto``` to center the img. — Eich, Jan 23 '14 at 01:47
@Eich but I also need vertical-align: middle; for the parent div — zavr, Jan 23 '14 at 01:50

Eich · Accepted Answer · 2014-01-23T01:58:29.133

2

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.

edited Jan 23 '14 at 01:58

answered Jan 23 '14 at 01:51

Eich

3,728
1
21
34

I thought it wouldn't work with vertical align of parent set to middle but it does. thanks! – zavr Jan 23 '14 at 01:52

score 1 · Answer 2 · answered Jan 23 '14 at 01:47

1

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

answered Jan 23 '14 at 01:47

Yooz

2,506
21
31

for example IE < 10 does not support it does it – zavr Jan 23 '14 at 01:50
No worries, his answer is much better! – Yooz Jan 23 '14 at 01:54

table-cell > img extra 4px space

2 Answers2