Vertically align multiple images within a div

Question

I am trying to vertically align/center some images within a div. It`s not 100% correct. The images are some pixels too much down to be vertically centered. Why is that?

.Container
{   
    width:280px;
    position:fixed;
    border:1px solid blue;
    left:0px;
    text-align: center;
    line-height:84px;
}

.Container input[type=image]
{
   vertical-align:middle;
}

UPDATE:

http://jsfiddle.net/2j531q32/

update 2: The images are not valid int the js fiddle There you see the gap between the image and the top border.

Answer 1

The accepted solution didn't work for me in IE11.

I found a great page of Method for Vertical Centering.

This works for me in Chrome and IE11 The line-height needs to be > the highest element to be centered.

#Parent{
    line-height: 200px; // > the highest element to be centered.
}

.parent img {
    vertical-align: middle;
}

Jsfiddle demonstration

Answer 2

No need for any line height css. You can vertically align divs using the display:table and display:table-cell styles. The height of .ButtonBarDiv has been exaggerated to show that they both center vertically.

One image per line: http://jsfiddle.net/eY7Ms/16/

Images on the same line: http://jsfiddle.net/eY7Ms/14/