垂直对齐twitter bootstrap缩略图？

Question

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

所以我正在尝试使用Twitter Bootstrap的thumbnails和thumbnail类来产生图像库类型的效果，但是我在尝试使图像正确对齐时遇到了麻烦。< / p>

从服务器检索的所有缩略图均匀缩放，以便它们适合200px X 200px图像。然而，有时它们比高（200px X 100px）宽，反之亦然（100px X 200px）。我想要的是让我的所有图像在它们所在的行中垂直和水平居中。例如，在此：

我希望testImage，testImage2和testImage3在其容器中向下移动，以便所有标记都排成一行。

这是HTML（带有一些AngularJS绑定）：

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

Answer 2

This answer应该有所帮助。基本上你必须修复文本和图像的height。 Bootstrap有.img-responsive有助于缩放，不要忘记overflow:hidden。