使用 twitter-bootstrap 沿列对齐缩略图

Question

我一直在使用 twitter-bootstrap 来创建我的摄影页面。我使用 li 标签中的默认缩略图类来创建边框并对齐它们。我有一大堆带有水平和垂直图像的缩略图。

默认设置确实不会创建漂亮的缩略图布局。通过在缩略图的 CSS 中添加固定高度，现在至少形成了一个整洁的网格。但是，在缩略图块中，图像始终与顶部对齐。当堆栈中有垂直图像时，这会导致形状奇特的网格。

我尝试添加“垂直对齐：中间；”在缩略图类中，但似乎不起作用。我对 CSS 很陌生，如果我遗漏了一些非常明显的东西，请原谅我。

Answer 1

不幸的是，Bootstrap 缩略图并没有真正针对固定高度进行标准化。如果要确保网格干净，则需要将图像裁剪为相同大小。或者，您可以使用自己的一些 CSS 手动设置 li 的高度并将 img 最大高度设置为 100%，然后在 li 上使用 display: table-cell，这样您的 vertical-align: middle 将实际上可以有效地将img 垂直居中。