title: Vertically middle align text in a bootstrap column
body: <p>I need tree cells in tree columns(col-4), with an image, that determines the height of the cell, and vertically middle-aligned text, like this: 
  <a href="https://i.stack.imgur.com/SnyAP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SnyAP.png" alt="enter image description here"></a></p>
  
  <p>This is what I get (<strong>CodePen</strong> <a href="http://codepen.io/serhio/pen/ZemNLe" rel="nofollow noreferrer">Here</a>): </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;&lt;/script&gt;
  &lt;style&gt;   a{display:block;}   &lt;/style&gt;
  &lt;div class="row"&gt;
     &lt;div class="col-xs-4 text-center" style="background:red"&gt;
        &lt;img src="http://placehold.it/75"&gt;
        &lt;a style="background: yellow"&gt;Some text red-yellow&lt;/a&gt;        
     &lt;/div&gt;
     &lt;div class="col-xs-4 text-center" style="background:lightgreen"&gt;
        &lt;img src="http://placehold.it/75"&gt;
        &lt;a style="background: gray"&gt;some other text long text some other long text lightgreen-gray&lt;/a&gt;
     &lt;/div&gt;
     &lt;div class="col-xs-4 text-center" style="background:skyblue"&gt;
        &lt;img src="http://placehold.it/75"&gt;
        &lt;a style="background: violet"&gt;this is another long long long text that should be here skyblue-violet&lt;/a&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Where is the problem ?</p>