title: CSS, vertical-align: middle with bootstrap
body: <p>I have a quite simple HTML/CSS problem which is also quite frequecently asked, but unfortunately I did not get it to work also after doing my research.</p>
  
  <p>I am using Bootstrap (3 RC2) and I'd like to vertical align an image into the middle of a row.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-10 col-md-6" id="main"&gt;
          &lt;p&gt;&lt;img src="http://placekitten.com/500/700" alt="" width="500" height="700" /&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-1 col-md-1" style="display: inline-block; vertical-align: middle;"&gt;
          &lt;img src="http://placekitten.com/100/116"  width="100" height="116" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The second, smaller image should be vertically centered in the middle of the <code>div.row</code>. However, it does not seem to work. You can see the problem using this fiddle: <a href="http://jsfiddle.net/veQKY/2/">http://jsfiddle.net/veQKY/2/</a></p>
  
  <p>It is a requirement to not break the responsiveness of Bootstrap, i.e. when using a device with small width the second image should be stapled horizontally beneath the first image.</p>