title: Vertically center constrained image in Bootstrap thumbnail
body: <p>Using <a href="http://getbootstrap.com/" rel="nofollow noreferrer">Twitter Bootstrap</a>, I'm trying to create a horizontally scrolling series of <a href="http://getbootstrap.com/components/#thumbnails" rel="nofollow noreferrer">thumbnails</a> which allows for a scrollbar within the row that the thumbnails are displayed in, like so:</p>
  
  <p><img src="https://i.stack.imgur.com/zhz0H.png" alt="enter image description here"></p>
  
  <p>This gets me most of the way there, using this HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;Hello there&lt;/div&gt;
  &lt;div class="row" style="overflow-x:scroll"&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div class="thumbnail" style="width: 400px; height: 400px"&gt;
                  &lt;img src="http://i.minus.com/iucsUZfSM9v45.gif"/&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div class="thumbnail" style="width: 400px; height: 400px"&gt;
                  &lt;img src="http://i.minus.com/iucsUZfSM9v45.gif"/&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div class="thumbnail" style="width: 400px; height: 400px"&gt;
                  &lt;img src="http://i.minus.com/iucsUZfSM9v45.gif"/&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/54fgv/2/" rel="nofollow noreferrer">http://jsfiddle.net/54fgv/2/</a></p>
  
  <p>The <code>overflow</code> CSS property works great, giving me the scrollbar for the container <code>div</code>.</p>
  
  <p>The thumbnail <code>div</code> elements are going to be a fixed size, which is more than likely going to be smaller than the image.  In this case, the image is constrained to fit accordingly.  As you can see though, when the image is wider than the thumbnail, the width is set to the thumbnail and the height is scaled accordingly.  This is the behavior that I want, but I'd like to have the image vertically centered in the thumbnail.</p>
  
  <p>I've tried adding <code>vertical-align: middle</code> to the thumbnail <code>div</code> elements, but to no avail.</p>
  
  <p>How can I get the image to be centered vertically within the thumbnail?</p>