css - Vertical centering an inline image in a single-line containing box -

example: http://jsfiddle.net/kgn5r/

i'm trying figure out why inline image doesn't wind vertical center of container.

<div class="container">     <img src="http://dummyimage.com/46x46/000/fff.png" /> </div> 

css:

.container {     height: 50px;     width: 80px;     line-height: 50px;     background-color: gray;     text-align: center; }  img {     display: inline;     vertical-align: middle; } 

any or alternative solutions appreciated. if you'd me elaborate on something, i'd happy to.

try setting font-size of container example 0.

according w3:

vertical-align: middle; align vertical midpoint of box baseline of parent box plus half x-height of parent.

so has height of letter 'x' of parent, 0 if set font size 0:

.container {     font-size: 0;     height: 50px;     width: 80px;     line-height: 50px;     background-color: gray;     text-align: center; }  img {     display: inline;     vertical-align: middle; } 

this seems work reliable