Question

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

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

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

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

我尝试在CSS中使用table和table-cell方法，但容器会扩展以适应图像，即使使用overflow: hidden也是如此。我已经考虑了服务器端方法，比如在position: relative上使用top值为<img>，但如果我在页面上不想使用任何额外的服务器端处理不必。我不想使用JavaScript，所以如果这是我唯一的其他选择，我只会在服务器端进行我应该提一下，图像总是40x40px或更大。

This fiddle演示了我在display: table尝试的内容。

Answer 1

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

您可以选择您最满意的方法。

Answer 2

..............................的 Demo

您好vertical-align:top 抛出 css已经习惯了img tag

img { vertical-align:top; }

的 Live demo 的

Answer 3

我决定采用一种更简单的方法，不会在较旧的浏览器上缩放图像，而是在较新的浏览器上缩放图像，以及使用更少的代码。 HTML基本上只是一个<div>标签，带有这个CSS。

div.image {
    background: url(IMAGE) center center no-repeat;
    background-size: cover;
}

background-size: cover将允许符合CSS3标准的浏览器缩放图像以适合div，而较旧的浏览器仍将图像居中，但不能缩放图像。这不是一个完美的解决方案，但肯定适合我的情况。

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

3 个答案: