vertical-align：middle不能按预期工作

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：

我应该如何做我想要的？我真的不明白这种行为......

提前致谢！

编辑：你可以尝试所有你想要的here！

Answer 1

我猜你应该使用2.7em的行高值，因为行在它们上方和下方有一些额外的空间，所以3em的行高不适合高度为3em的div，这就是你的图像得到的原因裁剪。

编辑：2.78似乎很好。

Answer 2

你可以使用align =“absmiddle”而不是vertical-align：middle;

希望它会有所帮助

Answer 3

vertical-align:baseline;按预期工作（注意：我只在Safari和FF上尝试过）或从容器中删除overflow:hidden（如果您为清算目的而定义了更改清算方法）