vertical-align:middle doesn't work as expected

I just want to place images in a fixed-height container: images must not exceed container's height and must be centered vertically.

So I have

<div id="partenaires"> 
    <img src="images/partenaires/Debian.png" alt="Debian" /> 
    <img src="images/partenaires/Fedora.png" alt="Fedora" /> 
    ... 
</div>

with

#partenaires { 
    height:3em; 
    line-height:3em; 
    white-space:nowrap; 
    overflow:hidden; 
    clear:both; 
} 
#partenaires img { 
    vertical-align:middle; 
    margin:0 1em; 
    max-height:100%; 
}

But it appears big images are truncated on bottom like this (for all browsers) because vertical-align:

How I should do to what I want? I really don't understand th开发者_JS百科is behaviour...

Thanks in advance!

EDIT: you can try all you want here!

---

I guess you should use a line-height value of 2.7em because lines have some extra space above and below them so a line-height of 3em won't fit in a div of height 3em which is why your images are getting cropped.

edit: 2.78 seems good.

---

you can use align="absmiddle" rather than vertical-align:middle;

Hope it will help

---

vertical-align:baseline; works as expected (note: I tried only on Safari and FF) or remove overflow:hidden from container (if you defined for clearing purpose just change clearing method)