vertical-align: средний не работает должным образом

Question

Я просто хочу разместить изображения в контейнере с фиксированной высотой: изображения не должны превышать высоту контейнера и должны быть центрированы по вертикали.

Так что я

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

с

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

Но оказывается большие изображения обрезаются на дно, как это (для всех браузеров), потому что vertical-align:

Как я должен делать то, что хочу? Я действительно не понимаю этого поведения ...

Заранее спасибо!

EDIT: вы можете попробовать все, что хотите here!

Answer 1

Я думаю, вы должны использовать значение высоты строки 2.7em, потому что линии имеют дополнительное пространство выше и ниже них, поэтому высота строки 3em не будет вписываться в div высоты 3em, поэтому ваши изображения обрезаются.

Редактировать: 2.78 кажется хорошим.

Answer 2

вы можете использовать align = "absmiddle", а не вертикально-выровнять: middle;

Надеется, что это поможет

Answer 3

vertical-align:baseline; работает, как ожидалось (примечание: я попытался только на Safari и FF) или удалить overflow:hidden из контейнера (если вы определили для очистки цели просто изменить очистной метод)