Twitter bootstrap 3 - vertical align columns in a row [middle]

Question

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.

If I have text in heading 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.

What if I need to normalize the columns and make it aligned in the middle?

My questions is:

• Is there a native bootstrap way to align the columns?
• If it not support this kind of alignment, what "hack" I can use? I Tried some "hacks" but they affect the base bootstrap functionality.

What exactly I need to do:

Sorry but it's hard to make it in a jsfiddle, It's includes Angular directives and templates. Just for example:

I have a directive which generates this:

I need to do align the image in the middle, or at least to be at the heading vertical start. For example:

I made this jsfiddle if you want to experiment. I accept just explanations without any code.

I can fix it with some "hacked" css, but I wanna know how I can do that the right way.

Answer 1

One approach is to use translateY on the img element like this:

.v-center {
  position: relative;
  transform: translateY(50%);
}

You'll also want to put the image inside a col-*-2..

Demo: http://bootply.com/tVyuhaFoww

Answer 2

Another way to align the image at the top of the first paragraph is to break your design into two rows. The first row contains the header and the second row contains the image, paragraphs and links. This closely resembles your second image above, if that's the way you want it to look.

http://jsfiddle.net/404vska2/

<div class="row">
  <div class="col-xs-10 col-xs-push-2">
    <h4 class="ng-binding">Monaco make Bernardo Silva move permanent</h4>
  </div>
</div>
<div class="row">
  <img src="http://s12.postimg.org/gt71dlbd5/1421893782_flat_world_cup_icon_512_Socker_1.png" alt="" class="col-xs-2">
  <div class="col-xs-10">
    <p class="ng-binding">Bernardo Silva's loan move from SL Benfica to AS Monaco FC has been made permanent, with the 20-year-old settling in well since his summer switch to France.</p>
    <span class="rss-news-date ng-binding">Jan 21, 2015</span>
    <p><a ng-href="http://www.uefa.com/uefachampionsleague/news/newsid=2204161.html?rss=2204161+Monaco+make+Bernardo+Silva+move+permanent" href="http://www.uefa.com/uefachampionsleague/news/newsid=2204161.html?rss=2204161+Monaco+make+Bernardo+Silva+move+permanent">Lean more</a> </p>
  </div>
</div>