0

更新： Plnkr 可在此处演示：http ://plnkr.co/edit/i6ngfaMgSE0XGZq3VuBW?p=preview （尽管您需要扩大“预览”窗口，以便响应的东西不会启动。

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

从服务器检索的所有缩略图都统一缩放，以便它们适合 200 像素 X 200 像素的图像。但是，有时它们比高（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>
4

2 回答 2

1

尝试使用以下css：

.thumbnail{
    vertical-align: middle !important;
}
于 2013-07-08T14:38:20.257 回答
1

这个答案应该会有所帮助。基本上你必须修复height文本和图像。Bootstrap 有一个.img-responsive有助于扩展的功能，不要忘记overflow:hidden.

于 2013-12-16T15:24:43.950 回答