html - 垂直对齐 twitter bootstrap 缩略图？

Question

更新: Plnkr 可在此处进行演示:http://plnkr.co/edit/i6ngfaMgSE0XGZq3VuBW?p=preview (尽管您需要加宽“预览”窗口，以便响应式内容不会启动。

所以我尝试使用 Twitter Bootstrap 的 thumbnails 和 thumbnail 类来产生图像画廊类型的效果，但是我在尝试获取图像时遇到了问题全部正确对齐。

从服务器检索的所有缩略图都统一缩放，以便它们适合 200 像素 X 200 像素的图像。然而，有时它们比高宽得多(200px X 100px)，反之亦然(100px X 200px)。我想要的是让我所有的图像在它们所在的行中垂直和水平居中。因此，例如:

我想将 testImage、testImage2 和 testImage3 在它们的容器中向下移动，以便标签全部对齐。

这是 HTML(带有一些 AngularJS 绑定(bind)):

<div class="container" ng-controller="StaticDataManagementCtrl">
  <div class="row">
    <div class="span12">
      <tabset>
        <tab heading="Text" select="loadTextLibrary()">
          <div class="row"></div>
        </tab>
        <tab heading="Images" select="loadImageLibrary()">
          <div class="row-fluid">
            <ul class="thumbnails">
              <li class="span3" ng-repeat="image in staticImages">
                <div class="thumbnail">
                  <img ng-src="/api/static/images/{{image._id}}/thumb">
                  <h3>{{image.name}}</h3>
                  <p>Some sample description</p>
                </div>
              </li>
            </ul>
          </div>
        </tab>
        <tab heading="Health Mark" select="loadHealthMarkLibrary()"></tab>
      </tabset>
    </div>
  </div>
</div>

Answer 1

尝试使用以下 CSS:

.thumbnail{
    vertical-align: middle !important;
}