使用twitter-bootstrap沿着列对齐缩略图
我一直在玩twitter-bootstrap来创建我的摄影页面。我在li标签中使用默认缩略图类来创建边框并对齐它们。我有一大堆缩略图的图像，水平和垂直。
I have been playing with twitter-bootstrap to create my photography page. I am using the default thumbnail class within li tags to create the border and align them. I have a whole bunch of thumbnails with images which are both horizontal and vertical.
默认设置确实不会创建漂亮的缩略图布局。通过在缩略图的CSS中添加固定高度，至少会形成一个整洁的网格。然而，在缩略图块内，图像总是与顶部对齐。当在堆叠中存在垂直图像时，这导致奇数形网格。
The default settings really does not create a pretty layout of the thumbnails. By adding fixed height in the thumbnail's CSS, at least a neat grid gets formed now. However, within the thumbnail block, the images always align to the top. This leads to odd shaped grids when there is a vertical image in the stack.
我尝试添加vertical-align：middle;在缩略图类中，但似乎没有工作。我非常新的CSS，所以请原谅我，如果我缺少一些很明显的东西。
I tried adding "vertical-align: middle;" within the thumbnail class, but does not seem to be working. I am pretty new to CSS, so kindly pardon me if I am missing something really obvious.
t真正规范化一个固定的高度。如果你想确保你有一个干净的网格，你需要裁剪图像到相同的大小。您也可以使用自己的一些CSS手动设置 li 的高度，并设置 img max高到100％，然后在 li 上使用 display：table-cell ，因此您的 vertical-align：middle 实际上在垂直居中 img 时有效。
Unfortunately the Bootstrap thumbnails don't really normalize for a fixed height. If you want to make sure you have a clean grid, you need to crop your images to the same size. You could, alternately, use some CSS of your own to set the height of the li manually and set the img max-height to 100%, then use display: table-cell on the li so your vertical-align: middle will actually be effective at vertically centering the img.