*完美*垂直图像对齐

Question

我有一个固定大小的方形div,并希望在内部放置一个任意大小的图像,以便使用CSS在水平和垂直方向上居中.水平很容易:

.container { text-align: center }

对于纵向,常见的解决方案是:

.container {
    height: 50px;
    line-height: 50px;
}
img {
    vertical-align: middle;
}

但这并不完美,取决于字体大小,图像将在2-4px左右太远.

据我所知,这是因为用于垂直对齐的"中间"实际上不是中间,而是靠近中间的字体上的特定位置.一个(略微hacky)解决方法是:

container {
    font-size: 0;
}

这适用于Chrome和IE7,但不适用于IE8.我们希望所有字体行都在同一点,中间,但它似乎是根据浏览器,可能是使用的字体来命中注定.

我能想到的唯一解决方案是破解线高,使其略短,使图像出现在正确的位置,但它看起来非常脆弱.有更好的解决方案吗？

在这里查看所有三种解决方案的演示:http: //jsfiddle.net/usvrj/3/

没有IE8的人可能会发现这个截图很有用:

Answer 1

使用您的图像作为背景怎么样？这样你就可以在任何地方一致地将其居中。沿着这些思路：

margin:5px;
padding:0;
background:url(http://dummyimage.com/50) no-repeat center center red;
height:60px;
width:60px;