title: Thumbnails using twitter bootstrap not vertically aligned
body: <p>Here's my sample output:</p>
  
  <p><img src="https://i.stack.imgur.com/BeLAk.png" alt="enter image description here"></p>
  
  <p>Here's my <code>html</code> code on it:</p>
  
  <pre><code>&lt;div class="products"&gt;
  &lt;ul class="thumbnails"&gt;'
      &lt;li&gt;
          &lt;div&gt;'.$item-&gt;ASIN.'&lt;/div&gt;
          &lt;div&gt;&lt;img src="'.$item-&gt;SmallImage-&gt;URL.'" alt=""&gt;&lt;/div&gt;
          &lt;div&gt;'.$item-&gt;ItemAttributes-&gt;Title.'&lt;/div&gt;
          &lt;div&gt;'.$item-&gt;ItemAttributes-&gt;ProductGroup.'&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here's my <code>css</code> code:</p>
  
  <pre><code>    .thumbnails {
      text-align: center;
  }
  .thumbnails li {
      width: 150px;
      height: 250px;
      background: red;
      float: none !important; /* to overwrite the default property on the bootstrap stylesheet */
      display: inline-block;
      *display: inline; /* ie7 support */
      zoom: 1;
  }
  </code></pre>
  
  <p>I noticed it is already horizontally aligned, my problem is to align it vertically. What should I do? Please help thanks!</p>