title: Vertically align text next to image
body: <p>I am trying to vertically align some text next to an image using Twitter Bootstrap 3</p>
  
  <pre><code>&lt;div class="col-sm-4"&gt;
      &lt;img class="img-circle" src="http://dummyimage.com/100x100/000/fff"&gt;
      &lt;h2&gt;
          Short title
      &lt;/h2&gt;
  &lt;/div&gt;
  
  &lt;div class="col-sm-4"&gt;
      &lt;img class="img-circle" src="http://dummyimage.com/100x100/000/fff"&gt;
      &lt;h2&gt;
          A longer title
      &lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/DTcHh/23814/" rel="nofollow">https://jsfiddle.net/DTcHh/23814/</a></p>
  
  <p>Sometimes my titles are on one line and sometimes they are on two.  This means I am unable to set a static margin to get the text to be vertically centered.</p>
  
  <p>Whats the best way to achieve this and does anybody have an example I can see?</p>