title: Vertically align twitter bootstrap thumbnails?
body: <p><strong>Update:</strong> Plnkr available here to demonstrate: <a href="http://plnkr.co/edit/i6ngfaMgSE0XGZq3VuBW?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/i6ngfaMgSE0XGZq3VuBW?p=preview</a> (although you need to widen the "preview" window so that the responsive stuff doesn't kick in.</p>
  
  <p>So I'm trying to use Twitter Bootstrap's <code>thumbnails</code> and <code>thumbnail</code> classes to produce an image-gallery type effect, however I'm having trouble trying to get the images to all align properly.</p>
  
  <p>All the thumbnails being retrieved from the server are scaled uniformly so that they fit in a 200px X 200px image. However, sometimes they are much wider than tall (200px X 100px) and vice-versa (100px X 200px). What I want is to have all my images vertically and horizontally centred within the row they are on. So for example in this:</p>
  
  <p><img src="https://i.stack.imgur.com/50JyG.png" alt="enter image description here"></p>
  
  <p>I'd like <code>testImage</code>, <code>testImage2</code> and <code>testImage3</code> to be moved down in their containers so that the  tags all lined up.</p>
  
  <p>Here's the HTML (with some AngularJS bindings):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container" ng-controller="StaticDataManagementCtrl"&gt;
    &lt;div class="row"&gt;
      &lt;div class="span12"&gt;
        &lt;tabset&gt;
          &lt;tab heading="Text" select="loadTextLibrary()"&gt;
            &lt;div class="row"&gt;&lt;/div&gt;
          &lt;/tab&gt;
          &lt;tab heading="Images" select="loadImageLibrary()"&gt;
            &lt;div class="row-fluid"&gt;
              &lt;ul class="thumbnails"&gt;
                &lt;li class="span3" ng-repeat="image in staticImages"&gt;
                  &lt;div class="thumbnail"&gt;
                    &lt;img ng-src="/api/static/images/{{image._id}}/thumb"&gt;
                    &lt;h3&gt;{{image.name}}&lt;/h3&gt;
                    &lt;p&gt;Some sample description&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/tab&gt;
          &lt;tab heading="Health Mark" select="loadHealthMarkLibrary()"&gt;&lt;/tab&gt;
        &lt;/tabset&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>