css - 在固定大小的元素中垂直居中图像：在顶部偏移

Question

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

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

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

有什么提示吗？

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

Answer 1

嘿，我想你想要这个

像这样在ul和li中删除margin -minus并添加边框

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

Answer 2

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

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.