垂直居中的图像缩略图成为固定大小的div [英] Vertically center image thumbnails into fix-sized div

问题描述

好的，我知道这已经被讨论到死亡，人们得到了绿色答案的问题，但没有一个为我工作。

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

请访问此网站：点击这里，点击例如Web按钮。你会看到所有的缩略图都是或在他们的框顶部。我真的尝试了我能想到的一切。我知道的唯一选择是将图像高度硬编码到每个缩略图标签中，但是这将永久存在，因为我需要将它们的尺寸添加到数据库中。

如果您使用的是Firebug，您可以轻松地编辑网站上的所有内容，以运行测试，这是我做的大部分。

希望有人能帮助我。我真的很感激
非常感谢。

解决方案

这是否有效？

 < div id =outer> 
< div id =inner> 
 // image here here 
< / div> 
< / div> 
 
 #outer {
显示：表; 
} 
 #inner {
 display：table-cell; 
 vertical-align：middle; 
} 
  

OK, I know this has been discussed to death and people got greenlit answers for their questions but none of them work for me.

What I want to do is vertically center thumbnails, which are generated dynamically or loaded via AJAX into a div with a fixed size. In my case 200*200 pixel.

Please go to this site: click here and click on for example the "Web" button. You'll see that all the thumbnails are or on top of their boxes. I really tried everything I could think of. The only option I know would work is to hard-code the image height into every thumbnail tag but this would take forever because I would need to add their dimensions into the DB.

If you are using Firebug you can easily edit everything on the site to run tests, this is how I did it mostly.

I hope someone can help me here. I really would appreciate it. Thank you very much.

解决方案

Does this work?

<div id="outer">
    <div id="inner">
         //image goes here
    </div>
</div>

#outer {
  display:table;
}
#inner {
  display:table-cell;
  vertical-align:middle;
}

这篇关于垂直居中的图像缩略图成为固定大小的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！