Vertical alignment of multiple images inside a div

Question

I am trying to vertically align / center some images inside a div. This is not 100% correct. Images have some pixels too strong to be vertically centered. Why is this?

.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: images are not valid in js violin There you see the gap between the image and the upper border.

Answer 1

No css line height required. You can vertically align divs using the display:table and display:table-cell styles. The height of the .ButtonBarDiv been exaggerated to show that both centers are upright.

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

Images on one line: http://jsfiddle.net/eY7Ms/14/

Answer 2

After some research, I found another question about stackoverflow: The image inside the div has extra space under the image

Browsers seem to create extra space above / below the line, so you might want to change the height of the line, here is an example:

http://jsfiddle.net/eY7Ms/13/

so if you want to adjust the vertical extra space, you can do something like this:

 .boxWithVerticalCenteredContent { height: 4em; line-height: 3.6em; } 

I know that this is not perfectly focused and fixed in height, but if you want to focus on the absolute, you can use position: absolute and top, bottom, left, right

Answer 3

The accepted solution does not work for me in IE11.

I found a great vertical centering method page.

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

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

Jsfiddle demo

Answer 4

Will work only in modern browsers, but:

 .elementToAlign{ position: relative; top: 50%; transform : translateY(-50%); }