将图像垂直居中于固定大小的元素：顶部偏移

Question

我想在固定大小的方形容器中显示缩略图，水平和垂直对齐缩略图。

使用height，line-height和vertical-align CSS属性，我几乎可以实现它，但顶部有一个小偏移（我的示例中为2px）并且我想了解原因。

作为一种解决方法，我可以为图像设置负的上边距，但我想尽可能避免它（更容易在浏览器中出现问题？）。我也很惊讶我需要一个-4px上边距来抵消2px偏移量。

任何提示？

小提琴：http://jsfiddle.net/GlauberRocha/N6Rme/

Answer 1

嘿，我想你想要这个

删除margin -minus并在 ul 和 li 中添加 border ，如下所示

现场演示http://jsfiddle.net/N6Rme/5/

Answer 2

我没有在你的标记中发现任何错误，我认为这是一些奇怪的排版和css问题，这就是为什么我建议你尝试一种新的垂直居中技术，可以为你工作

在线demo on dabblet.com

添加到css：

li {
    /* … */
    position: relative;
}

li img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

此演示中的主要技巧是在正常的元素流中从上到下，因此margin-top：auto设置为零。但是，对于绝对定位的元素，可以使用相同的自由空间分布，同样可以在指定的顶部和底部垂直居中（在IE7中不起作用）。

此技巧适用于任何大小的img。