bootstrap图片库

Question

我开始使用引导CSS框架。有一些课程要建立一个图像库，它基本上是围绕图片绘制一个框架，并由一个listitem，一个锚点和图像组成。如果图像尺寸不同，画廊看起来不太好。我的想法是为每个缩略图设置固定的宽度和高度，并将图像置于边界中央。这有些不起作用。 tumbnail总是附着在框架的顶部。

<ul class="thumbnails" id="ulthumbs"> 
<li> 
    <a class="thumbnail" style="width:120px; height:120px; line-height:120px;" > 
     <img src="http://placehold.it/350x150" style="width:120px; height:84px; vertical-align:middle"> 
    </a> 
</li> 
</ul> 

想法？

最佳， 伯恩哈德

Answer 1

除了使用一个表，没有一个跨浏览器的方式垂直对齐未知高度的项目没有JavaScript。

jQuery Vertical Align Plugin

你的情况，你会给列表项固定的高度，并使用插件来对准锚（这将需要设置为块级元素）。

Answer 2

没有JS的另一种解决方案是设置列表项目和锚点的宽度和高度，并将图像设置为位置为50％50％的锚点的背景。

这样，如果图像大于持有人，将被裁剪或用边框显示。

希望能帮助有人寻找类似的解决方案。