将图像缩略图垂直居中到固定大小的div中

好吧,我知道这已被讨论过死亡,人们对他们的问题得到了绿色答案,但没有一个对我有用.

我想要做的是垂直中心缩略图,它们是动态生成的,或者通过AJAX加载到具有固定大小的div中.在我的情况下200*200像素.

请访问此站点:单击此处并单击"Web"按钮.你会看到所有的缩略图都在他们的盒子上面.我真的尝试了我能想到的一切.我知道的唯一选择是将图像高度硬编码到每个缩略图标签中,但这需要永远,因为我需要将它们的尺寸添加到数据库中.

如果您使用的是Firebug,您可以轻松编辑网站上的所有内容来运行测试,这就是我主要做的事情.

我希望有人可以帮助我.我真的很感激.非常感谢你.

通常当我必须这样做时,我只是不使用标签.相反,我把那个图像放在一个元素的背景上background-position: 50% 50%.例:

HTML

CSS

.thickbox {
    display: block;
    width: 200px;
    height: 200px;
    background-position: 50% 50%;
}

当然,这可能不是SEO友好或优雅可降解(因为没有CSS).但出于这个原因,你可以放置一个标签并将其设置为display: none,如下所示:

HTML

CSS

.thickbox {
    display: block;
    width: 200px;
    height: 200px;
    background-position: 50% 50%;
}
.thickbox img {
    display: none;
}

你有它.一个无JavaScript,SEO友好的解决方案:-).希望你能得到这个概念,让我知道我是否需要解释更多.