1

我开始使用引导 CSS 框架。有一些类可以构建一个图像库，它基本上在图片周围绘制一个框架，由一个列表项、一个锚点和图像组成。如果图像大小不同，画廊看起来不太好。我的想法是为每个缩略图设置一个固定的宽度和高度，并将图像置于边框的中心。这不知何故不起作用。缩略图始终连接到框架的顶部。

<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>

想法？

最好的，伯恩哈德

4

2 回答 2

2

除了使用表格之外，没有跨浏览器的方法可以在没有 Javascript 的情况下垂直对齐未知高度的项目。

jQuery 垂直对齐插件

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

于 2012-06-07T01:15:48.300 回答
1

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

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

希望这会帮助寻找类似解决方案的人。

于 2012-12-11T20:55:57.717 回答