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

Question

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

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

我试着添加“vertical-align：middle;”在缩略图类中，但似乎没有工作。我对CSS很新，如果我错过了一些非常明显的东西，请原谅我。

Answer 1

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