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.

Can you post your HTML or make a [JSFiddle](http://www.jsfiddle.net) showing your problem? — jamesplease, Jan 14 '13 at 21:32
Are you sure the images simply don't have something about them that just 'makes' them look off center? For instance white background at the bottom of the image on a white background of the page could make it look funky. — vector, Jan 14 '13 at 21:34
Have you tried this resource? http://phrogz.net/css/vertical-align/index.html — Willem Ellis, Jan 14 '13 at 21:42
seems to be a strange layout problem, maybe browser specific? try this, it works in firefox: http://jsfiddle.net/eY7Ms/7/ — r3bel, Jan 14 '13 at 22:09
@r3bel http://jsfiddle.net/eY7Ms/9/ they are not vertically centered. There seems to be more space between the top edge of the image and the top div. — Elisabeth, Jan 14 '13 at 22:14
Are you trying to vertically align the images side by side or one each line? — Omega, Jan 14 '13 at 22:34

score 2 · Answer 1 · answered Dec 04 '14 at 16:46

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

score 1 · Accepted Answer · answered Jan 14 '13 at 22:54

1

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/

answered Jan 14 '13 at 22:54

Omega

2,998
2
16
19

Thanks Omega, I used your code and changed my sample to make it work: http://jsfiddle.net/eY7Ms/23/ – Elisabeth Jan 15 '13 at 10:15

score 0 · Answer 3 · edited May 23 '17 at 12:26

After some research i found another question on stackoverflow: Image inside div has extra space below the image

It seems like browsers render an extra space above / below a line, so you might want to ajust the line-height, here is an exmaple:

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

so if you want to adjust the vertical extra space, you might do something like that:

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

i know, this is not perfectly centered and it is fixed in height, but if you want to center it absolute, you might want to use position: absolute and top, bottom, left, right

score 0 · Answer 4 · answered Apr 18 '16 at 16:15

0

Will only work in modern browsers but:

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

answered Apr 18 '16 at 16:15

scottdavidwalker

1,118
1
12
30

Vertically align multiple images within a div

4 Answers4