Twitter bootstrap 3 - vertical alignment columns per row [medium]

Question

I see bootstrap not fixing the height of the columns in a row. For example: a 1: 1 image, it will respond in the column, but the image position is at the top of the row.

If I have text in the heading tag, it has default fields that pop the text below. Thus, the image will be attached to the top, and the text will be slightly lower than the top.

What if I need to normalize the columns and center them?

My questions:

• Is there a native bootstrap for aligning columns?
• If it does not support such alignment, what can I use for hacking? I tried some "hacks", but they affect the functionality of the basic bootstrap.

What should I do:

Sorry, this is hard to do in jsfiddle, it includes Angular directives and templates. For instance:

I have a directive that generates this:

I need to align the image in the middle, or at least for a vertical heading start. For instance:

I did this jsfiddle if you want to experiment. I accept simple explanations without code.

I can fix this with some hacked css, but I want to know how I can do it right.

Answer 1

One approach is to use translateY in the img element as follows:

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

You will also want to place the image inside col-*-2 ..

Demo: http://bootply.com/tVyuhaFoww

Answer 2

Another way to align the image at the top of the first paragraph is to split the design into two lines. The first line contains the heading, and the second line contains the image, paragraphs and links. This is very similar to the 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 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>