html - 在较小的固定高度元素中垂直对齐可变高度图像

Question

我有以下 HTML，我可以更改它，但我希望保持原样简单。

<div class="c">
     <img ...>
</div>

图像将是可变大小的，并且应该在 div 中垂直居中。我目前正在使用以下 CSS:

.c {
    width: 40px;
    height: 40px;
    overflow: hidden;
}
.c img {
    width: 40px;
    height: auto;
}

我试过在 CSS 中使用表格和表格单元格方法，但容器会扩展以适合图像，即使使用 overflow: hidden 也是如此。 .我考虑过服务器端方法，比如使用 position: relative负top <img> 上的值, 但如果不需要的话，我宁愿不在页面上使用任何额外的服务器端处理。我不想使用 JavaScript，所以如果那是我唯一的选择，我会在服务器端使用它。
我应该提一下，图像将始终为 40x40 像素或更大。

This fiddle展示了我在 display: table 上的尝试.

Answer 1

看这里:http://www.vanseodesign.com/css/vertical-centering/

您可以选择您觉得最舒服的方法。