title: Twitter bootstrap 3 - vertical align columns in a row [middle]
body: <p>I see bootstrap do not fix the height of the columns in the row. For example: image 1:1, it will be responsive in the column, but the position of the image is at the top of the row. </p>
  
  <p>If I have text in <code>heading</code> tag, It have default margins that pushes the text below. So the image will be bonded to the top and the text will be little below the top.</p>
  
  <p>What if I need to normalize the columns and make it aligned in the middle?</p>
  
  <p><strong>My questions is:</strong> </p>
  
  <ul>
  <li>Is there a native bootstrap way to align the columns?</li>
  <li>If it not support this kind of alignment, what "hack" I can use? I Tried some "hacks" but they affect the base bootstrap functionality.</li>
  </ul>
  
  <p><strong>What exactly I need to do:</strong></p>
  
  <p>Sorry but it's hard to make it in a jsfiddle, It's includes Angular directives and templates. Just for example:</p>
  
  <p>I have a directive which generates this:</p>
  
  <p><img src="https://i.stack.imgur.com/MxTu1.png" alt="Not aligned"></p>
  
  <p>I need to do align the image in the middle, or at least to be at the <code>heading</code> vertical start. For example: 
  <img src="https://i.stack.imgur.com/NJSok.png" alt="enter image description here"></p>
  
  <p>I made this <a href="http://jsfiddle.net/ifch0o1/8h3pjugb/" rel="noreferrer">jsfiddle</a> if you want to experiment. I accept just explanations without any code.</p>
  
  <p>I can fix it with some "hacked" css, but I wanna know how I can do that the right way.</p>